{{define "title"}}{{.Repeater.Name}} · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Repeater</div>
    <h1 class="page-title fs-1">{{.Repeater.Name}}</h1>
  </div>
  {{if .CanManage}}
  <div class="col-auto ms-auto d-print-none">
    <a class="btn btn-primary" href="{{.AppURL}}/repeaters/{{.Repeater.PublicID}}">{{template "icon-arrow-right" "me-1"}}{{if .IsOwner}}Manage repeater{{else}}Go to repeater{{end}}</a>
  </div>
  {{end}}
</div>
{{end}}
{{define "content"}}
<div class="row row-cards">
  <!-- Left column -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header"><h2 class="card-title">Details</h2></div>
      <div class="card-body">
        <div class="datagrid">
          <div class="datagrid-item">
            <div class="datagrid-title">Status</div>
            <div class="datagrid-content">
              {{if .Repeater.Confirmed}}<span class="badge bg-success-lt">Confirmed</span>{{else}}<span class="badge bg-yellow-lt">Unconfirmed</span>{{end}}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Added</div>
            <div class="datagrid-content">{{ts .Repeater.CreatedAt "date"}}</div>
          </div>
        </div>
        <div class="mt-3">
          <div class="form-label">Radio settings</div>
          <div class="font-monospace">{{.Radio}}</div>
        </div>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-header"><h2 class="card-title">Documentation</h2></div>
      <div class="card-body">
        {{if .DocPublicHTML}}
        <div class="markdown">{{.DocPublicHTML}}</div>
        {{else}}
        <p class="text-secondary mb-0">No documentation has been published for this node.</p>
        {{end}}
      </div>
    </div>
  </div>

  <!-- Right column -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><h2 class="card-title">Identity</h2></div>
      <div class="card-body">
        <div class="form-label">Public key</div>
        <code class="pk d-block">{{.Repeater.PublicKeyHex}}</code>
      </div>
    </div>

    {{if .Repeater.Latitude}}
    <div class="card mt-3">
      <div class="card-header"><h2 class="card-title">Location</h2></div>
      <div class="card-body p-2">
        {{template "map-styles"}}
        <div id="map" style="height:240px" role="region" aria-label="Map of this repeater's location"></div>
        {{template "map-scripts"}}
        <script src="{{ asset "/static/meshmap.js" }}"></script>
        <script nonce="{{.Nonce}}">
          meshMap('map', [{name: {{.Repeater.Name}}, lat: {{.Repeater.Latitude}}, lon: {{.Repeater.Longitude}}}]);
        </script>
        <div class="text-secondary small mt-2 text-center">{{template "icon-map-pin" "me-1"}}<span class="font-monospace">{{.Repeater.Latitude}}, {{.Repeater.Longitude}}</span></div>
      </div>
    </div>
    {{end}}

    <div class="card mt-3">
      <div class="card-header"><h2 class="card-title">Stewards</h2></div>
      <div class="list-group list-group-flush">
        <div class="list-group-item d-flex align-items-center gap-2">
          <span class="text-secondary">{{template "icon-user" ""}}</span>
          <div class="flex-fill"><a class="fw-bold" href="{{$.RootURL}}/u/{{.Repeater.OwnerUsername}}">{{.Repeater.OwnerName}}</a></div>
          <span class="badge bg-success-lt">Primary</span>
        </div>
        {{range .Stewards}}
        <div class="list-group-item d-flex align-items-center gap-2">
          <span class="text-secondary">{{template "icon-user" ""}}</span>
          <div class="flex-fill"><a class="fw-bold" href="{{$.RootURL}}/u/{{.Username}}">{{.Name}}</a></div>
          <span class="badge bg-azure-lt">Backup</span>
        </div>
        {{end}}
      </div>
    </div>

    {{if .Orgs}}
    <div class="card mt-3">
      <div class="card-header"><h2 class="card-title">Organizations</h2></div>
      <div class="list-group list-group-flush">
        {{range .Orgs}}
        <a class="list-group-item list-group-item-action d-flex align-items-center gap-2" href="/orgs/{{.OrgSlug}}">{{template "icon-world" ""}}{{.OrgName}}</a>
        {{end}}
      </div>
    </div>
    {{end}}
  </div>
</div>
{{end}}