{{ define "detail" }}
{{ template "header" }}
<!-- Page title -->
<div class="page-header">
  <div class="row align-items-center">
    <div class="col-auto">
      <h2 class="page-title">
        URL Detail
      </h2>
    </div>
    <div class="col-auto">
      <div class="text-muted text-h5 mt-2">{{ .URL }}</div>
    </div>
  </div>
</div>

<div class="row">

  <div class="col-sm-6 col-lg-4">
    <div class="card card-sm">
      <a href="/screenshots/{{ .Filename }}" target="_blank" class="d-block">
        <img loading="lazy" src="/screenshots/{{ .Filename }}" 
             onerror="this.onerror=null; this.src='/assets/img/blank.png'" class="card-img-top">
      </a>
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="lh-sm">
            <div>{{ .URL }}</div>
            <div class="text-muted">{{ .Title }}</div>
          </div>
          <div class="ml-auto">
            <a href="#" class="text-muted">
              {{ .ResponseCode}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-8">

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Summary</h3>
          </div>
          <div class="card-body">
            <p>
              <kbd>{{ .URL }}</kbd> responded with <kbd>{{ .ResponseReason}}</kbd>
              <span>
                <a href="{{ .URL }}" target="_blank" class="btn-sm btn-light float-right">
                  Open URL
                </a>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Response Headers</h3>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>Key</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              {{ range .Headers }}
              <tr>
                <td class="text-muted text-nowrap">
                  <kbd>{{ .Key }}</kbd>
                </td>
                <td class="text-muted">
                  <kbd>{{ .Value }}</kbd>
                </td>
              </tr>
              {{ end }}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {{ if .TLS }}

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">TLS Information</h3>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>ServerName</th>
                <th>Version</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-muted">
                  <kbd>{{ .TLS.ServerName }}</kbd>
                </td>
                <td class="text-muted">
                  <kbd>{{ .TLS.Version }}</kbd>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">TLS Certificates</h3>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>Subject CN</th>
                <th>Issuer CN</th>
                <th>Sig Algorithm</th>
              </tr>
            </thead>
            <tbody>
              {{ range .TLS.TLSCertificates }}
              <tr>
                <td class="text-muted">
                  <kbd>{{ .SubjectCommonName }}</kbd>
                </td>
                <td class="text-muted">
                  <kbd>{{ .IssuerCommonName }}</kbd>
                </td>
                <td class="text-muted">
                  <kbd>{{ .SignatureAlgorithm }}</kbd>
                </td>
              </tr>
              {{ $out := .}}
              {{ if .DNSNames }}
              <tr>
                <td colspan="3" class="text-muted">
                  DNS Names for {{ $out.SubjectCommonName }}:
                  {{ range .DNSNames }}
                  <kbd>"{{ .Name }}" </kbd>
                  {{ end }}
                </td>     
              </tr>
              {{ end }}
              {{ end }}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {{ end }}

  </div>
</div>

{{ template "footer" }}
{{ end }}