script(type='text/javascript', src='//unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js')
link(href='//unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css', rel='stylesheet', type='text/css')
style(type='text/css').
  #visualization {
  width: 100%;
  height: 100%;
  /*border: 1px solid lightgray;*/
  }
  .vis-item.red {
    background-color: red;
    border-color: darkred;
  }


.row
  .col-12.text-center.p-3
    h1.rounded.bg-secondary Einsatzübersicht
  .col-4
    .row.no-gutters
      .col-12.d-flex.justify-content-between
        p#einsatz_datum.text-muted Einsatznummer: 
        p#einsatz_uhrzeit.text-muted.text-right 420123456
      .col-10.mt-2
        .align-items-center.font-weight-bold.rounded.bg-secondary.p-3.mr-2
          .ion-md-apps  -Stichwort-
      .col-2.mt-2
        .align-items-center.justify-content-center.rounded.bg-secondary.text-info.p-3
          .ion-md-apps.text-center
      .col-12
        div.border-top.m-3
        .card.mt-2
          .card-body.p-0
            #map.rounded(style={height: '20em'})
        div.border-top.m-3
        .card.mt-2
          .card-body.p-0
            ul.list-group.list-group-flush
              li.list-group-item -Objekt-
              li.list-group-item -Ort-
              li.list-group-item -Orststeil-
              li.list-group-item -Straße Hsnr-
              li.list-group-item.text-warning -Besonderheiten-

                
  //.col-12
    div.border-top.my-3
    .card.bg-secondary.mt-2
      .card-header.bg-light.p-2
        h5.text-info.font-weight-bold CB FW Cottbus 1
      .card-body.p-1
        div.d-flex.flex-wrap.justify-content-between.align-items-center
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between
              div.pr-2 FL CB 00/00-00
              div.p-2.badge.badge-success 2
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between
              div.pr-2 FL CB 01/00-00
              div.p-2.badge.badge-warning 3
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between
              div.pr-2 FL CB T-Dienst
              div.p-2.badge.badge-danger 4
    .card.bg-secondary.mt-2
      .card-header.bg-light.p-2
        h5.text-info.font-weight-bold CB FW Madlow
      .card-body.p-1
        div.d-flex.flex-wrap.justify-content-between.align-items-center
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between 
              div.pr-2 FL CB 12/00-00
              div.p-2.badge.badge-success 2
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between
              div.pr-2 FL SPN 00/00-00
              div.p-2.badge.badge-info 1
    .card.bg-secondary.mt-2
      .card-header.bg-light.p-2
        h5.text-info.font-weight-bold CB FW Cottbus 3
      .card-body.p-1
        div.d-flex.flex-wrap.justify-content-between.align-items-center
          div.flex-fill.rounded.bg-light.p-2.m-1
            div.d-flex.justify-content-between 
              div.pr-2 KAT CB 00/00-00
              div.p-2.badge.badge-success 2
    //table.table.table-striped
      tbody
        tr 
          th
            div.d-flex.justify-content-between.align-items-center
              div FL CB 00/00-00
              div.badge.badge-success 2
          th
            div.d-flex.justify-content-between.align-items-center
              div FL CB 12/00-00
              div.badge.badge-warning 3
        tr
          th
            div.d-flex.justify-content-between.align-items-center
              div FL CB T-Dienst
              div.badge.badge-danger 4
          th
            div.d-flex.justify-content-between.align-items-center
              div KAT CB 00/00-00
              div.badge.badge-success 2
        tr
          th
            div.d-flex.justify-content-between.align-items-center
              div FL SPN 00/00-00
              div.badge.badge-info 1
  .col-8
    .row.no-gutters
      .col-12.d-flex.justify-content-end
        p#einsatz_datum.text-muted 01.01.2020 
        p#einsatz_datum.text-muted  - 
        p#einsatz_uhrzeit.text-muted.text-right 11:22:33
      .col-12
        .card.bg-dark.mt-2
          .card-header.bg-secondary.p-2
            h5.text-danger.text-center CB FW Cottbus 1
          .card-body.p-1
            div.d-flex.flex-wrap.justify-content-between.align-items-center
              div.flex-fill.rounded.bg-secondary.p-2.m-1
                div.d-flex.justify-content-between
                  div.pr-2 FL CB 01/42-01
                  div.p-2.badge.badge-success 2
              div.flex-fill.rounded.bg-secondary.p-2.m-1
                div.d-flex.justify-content-between
                  div.pr-2 FL CB 01/82-01
                  div.p-2.badge.badge-warning 3
              div.flex-fill.rounded.bg-secondary.p-2.m-1
                div.d-flex.justify-content-between
                  div.pr-2 FL CB 01/71-01
                  div.p-2.badge.badge-danger 4
              div.flex-fill.rounded.bg-secondary.p-2.m-1
                div.d-flex.justify-content-between
                  div.pr-2 FL CB 01/85-01
                  div.p-2.badge.badge-info 1 
          .card-body.p-2
            #visualization.border.rounded(style='background-color:white')
          .card-body.p-2
    
      .col-12
        div.border-top.m-3
        //button#rueckmeldung.btn.btn-danger.btn-lg.btn-block.ion-md-paper-plane(type='button')  Rückmeldung senden

script(type='text/javascript').
      // DOM element where the Timeline will be attached
      var container = document.getElementById('visualization');
      // Create a DataSet (allows two way data-binding)
      var items = new vis.DataSet([
      {id: 1, className: 'red', content: 'Hans', start: '2020-02-19T16:00:00', end: '2020-02-19T16:10:00'},
      {id: 2, content: 'Günter', start: '2020-02-19T16:05:00', end: '2020-02-19T16:10:00'},
      {id: 3, content: 'Ilse', start: '2020-02-19T16:15:00', end: '2020-02-19T16:20:00'},
      {id: 4, content: 'Meyer', start: '2020-02-19T16:7:00', end: '2020-02-19T16:09:00'},
      ]);
      // Configuration for the Timeline
      var options = {};
      // Create a Timeline
      var timeline = new vis.Timeline(container, items, options);