script(type='text/javascript', src='/js/vis-timeline.min.js')
link(rel='stylesheet', href='/css/vis-timeline.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
    h2.rounded.bg-danger 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
        div.border-top.my-3.border-warning
      .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
        p Alarmierte Einsatzmittel
        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 Alarmierte Einsatzmittel
          .card-body.p-1
        .card.mt-2
          table.table.table-hover  
            thead.table-borderless 
              tr
                th(scope='col') Wache
                th(scope='col') Alarmierte Einsatzmittel
            tbody
              tr
                th(scope='row') CB FW Cottbus 1
                td
                  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 2
              tr
                th(scope='row') CB FW Madlow
                td 
                  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 11/23-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 12/46-01
                        div.p-2.badge.badge-warning 3 
        //.card.bg-dark.mt-2
          .card-header.bg-secondary.p-2
            h5.text-danger.text-center Alarmierte Einsatzmittel
          .card-body.p-1
            .row              
              .col-3
                div.border-right CB FW Cottbus 1
              .col-9
                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 2
          .card-body.p-1
            .row
              .col-3
                CB FW Madlow
              .col-9 
                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 11/23-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 12/46-01
                      div.p-2.badge.badge-warning 3 
        div.border-top.m-3
        .card.mt-2
          .card-header.bg-secondary.p-2
            h5.text-danger.text-center Einsatzrückmeldungen                      
          .card-body.p-2
            .form
            .button 
          .card-body.p-2
            #visualization.border.rounded(style='background-color:white')
          .card-body.p-2
            #rueckmeldung.list-group.list-group-horizontal.text-center
              a.list-group-item.flex-fill.text-info 4 EK
              a.list-group-item.flex-fill.text-danger 1 MA
              a.list-group-item.flex-fill 0 FK
              a.list-group-item.list-group-item-light.flex-fill.text-dark 0 AGT
        //div.border-top.m-3
        //.card.bg-dark.mt-2
          .card-header.bg-secondary.p-2
            h5.text-danger.text-center CB FW Madlow
          
        //.card-body.p-2
          #visualization2.border.rounded(style='background-color:white')
        //.card-body.p-2
          #rueckmeldung.list-group.list-group-horizontal.text-center
            a.list-group-item.flex-fill.text-info 1 EK
            a.list-group-item.flex-fill.text-danger 1 MA
            a.list-group-item.flex-fill 0 FK
            a.list-group-item.list-group-item-light.flex-fill.text-dark 0 AGT
      //.col-12
        div.border-top.m-3
        .card.bg-dark.mt-2
          .card-header.bg-secondary.p-2
            h5.text-center.text-warning Zusammenfassung
          .card-body.p-1
            #rueckmeldung.list-group.list-group-horizontal.text-center.font-weight-bold
              h3.list-group-item.flex-fill.text-info 5 EK
              h3.list-group-item.flex-fill.text-danger 2 MA
              h3.list-group-item.flex-fill 0 FK
              h3.list-group-item.list-group-item-light.flex-fill.text-dark 0 AGT
        //button#rueckmeldung.btn.btn-danger.btn-lg.btn-block.ion-md-paper-plane(type='button')  Rückmeldung senden