@extends('layouts.master')

@section('content')

  <style type="text/css">
    .field-label{
      display: inline-block;
      text-align: right;
      width: 17%;
      vertical-align: top;
    }
    .field-data{
      display: inline-block;
      width: 79%;
      vertical-align: top;
    }
    .mobile .field-label{
      display: block;
      text-align: left;
      width: 100%;
      font-weight: bold;
    }
    .mobile .field-data{
      width: 100%;
    }
    .mobile .field-data{
      width: 100%;
    }
    .label-data-pair{line-height: 2;}
    .mobile .label-data-pair{
      margin-bottom: 10px;
    }
    .buttons {
      padding-left: 80%;
    }
  </style>

  
  <h2>{{$alert->type}}: {!!$alert->short_subject!!}</h2>

  @if($unplanned || $quick)
    <div class="label-data-pair">
      <div class="field-label">Last Updated:</div>
      <div class="field-data">{{$alert->updated_at}}</div>
    </div>
  @endif

  <div class="label-data-pair">
    <div class="field-label">{{$security ? 'Date: ' : 'Event: '}}</div>
    <div class="field-data"> {{$alert->start ?? $default_string}}</div>
  </div>

  @if($planned)
    <div class="label-data-pair">
      <div class="field-label">Expected Duration:</div>
      <div class="field-data"> {{$alert->end ?? $default_string}}</div>
    </div>
  @endif

  <div class="label-data-pair">
    <div class="field-label">Status: </div>
    <div class="field-data">
      {{$alert->status ?? $default_string}}
    </div>
  </div>

  <div class="label-data-pair">
    <div class="field-label">Brief Description:</div>
    <div class="field-data"> {!!$alert->short_summary ?? $default_string!!}</div>
  </div>

  @if(!$quick && !$coecis && !$security)
    <div class="label-data-pair">
      <div class="field-label">User Impact:</div>
      <div class="field-data"> {!!$alert->user_impact == "" ? $default_string : $alert->user_impact!!}</div>
    </div>
  @endif

  @if($unplanned)
    <div class="label-data-pair">
      <div class="field-label">Workaround:</div>