<section class="header">
  <h3>
    {{action-menu model=model classNames="pull-right"}}
    <div class="state {{model.stateColor}}">
      <i class="{{model.stateIcon}}"></i> {{model.displayState}}
    </div>
    <span class="right-divider">{{#link-to "certificates"}}Certificates:{{/link-to}} {{model.displayName}}</span>
  </h3>
  {{partial "description"}}
</section>

<section>
  <div class="row">
    <div class="row-same-height row-full-height">
      <div class="col-sm-12 col-md-6 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
        <div class="well no-padding-margin" style="height: 100%;">
          <div style="padding: 20px;">
            <label class="section">Info</label>
            <div>
              <ul class="list-lines">
                <li>
                  <label>Valid Beginning</label>
                  {{date-calendar model.issuedAt}} ({{date-from-now model.issuedDate}})
                </li>
                <li>
                  <label>Expires</label>
                  <span class="{{if model.expiresSoon "text-bold text-danger"}}">
                    {{date-calendar model.expiresAt}}
                    ({{date-from-now model.expiresDate}})
                  </span>
                </li>
                <li class="force-wrap">
                  <label>Algorithm</label>
                  {{model.algorithm}}{{#if model.keySize}} - {{model.keySize}} bits{{/if}}
                </li>
                <li class="force-wrap">
                  <label>Issuer</label>
                  {{model.displayIssuer}}
                </li>
                <li class="force-wrap">
                  <label>Serial Number</label>
                  {{model.serialNumber}}
                </li>
                <li>
                  <label>Version</label>
                  {{model.version}}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12 col-md-6 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
        <div class="well no-padding-margin" style="height: 100%;">
          <div style="padding: 20px;">
            <label class="section">Domain Names</label>
            <div>
              <ul class="list-unstyled">
                {{#if model.CN}}
                  <li><a href="{{model.CN}}" target="_blank">{{model.CN}}</a> (CN)</li>
                  {{#each model.displaySans as |san|}}
                    <li><a href="{{san}}" target="_blank">{{san}}</a></li>
                  {{/each}}
                {{else}}
                  <span class="text-muted">None</span>
                {{/if}}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
