{{define "title"}}{{.ProfileUser.Name}} · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Profile</div>
    <h1 class="page-title fs-1">{{.ProfileUser.Name}}</h1>
    <div class="text-secondary">@{{.ProfileUser.Username}}</div>
  </div>
</div>
{{end}}
{{define "content"}}
{{$hasSidebar := .Links}}
<div class="row row-cards">
  <!-- Left: about -->
  <div class="{{if $hasSidebar}}col-lg-8{{else}}col-12{{end}}">
    <div class="card">
      <div class="card-header"><h2 class="card-title">About</h2></div>
      <div class="card-body">
        {{if or .Location .Callsign}}
        <div class="d-flex flex-wrap gap-3 mb-3 text-secondary">
          {{if .Location}}<span class="d-inline-flex align-items-center">{{template "icon-map-pin" "me-1"}}{{.Location}}</span>{{end}}
          {{if .Callsign}}<span class="d-inline-flex align-items-center">{{template "icon-world" "me-1"}}<span class="font-monospace">{{.Callsign}}</span></span>{{end}}
        </div>
        {{end}}

        {{if .Bio}}<p class="mb-0">{{.Bio}}</p>{{end}}

        {{if not .HasDetails}}<p class="text-secondary mb-0">This person hasn't added any profile details yet.</p>{{end}}
      </div>
    </div>
  </div>

  <!-- Right: contact links (MeshCore keys expand inline to a QR code) -->
  {{if $hasSidebar}}
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><h2 class="card-title">Links</h2></div>
      <div class="list-group list-group-flush">
        {{range $i, $l := .Links}}
        {{if $l.IsMeshCore}}
        <div class="list-group-item">
          {{/* text-start because this row is a <button>, and a button centers its
               text by default — without it this one label sits centered while every
               other row in the list is left-aligned. */}}
          <button type="button" class="d-flex align-items-center gap-2 text-reset text-start border-0 bg-transparent p-0 w-100" data-bs-toggle="collapse" data-bs-target="#mesh-{{$i}}" aria-expanded="false" aria-controls="mesh-{{$i}}">
            <span class="text-secondary d-flex" title="{{$l.PlatformName}}">{{template "link-icon" $l.Platform}}</span>
            <span class="flex-fill text-truncate">{{$l.Display}}</span>
            <span class="text-secondary d-flex">{{template "icon-qrcode" ""}}</span>
          </button>
          <div class="collapse" id="mesh-{{$i}}">
            {{if $l.QR}}<div class="text-center mt-3"><img class="rounded border" src="{{$l.QR}}" width="200" height="200" alt="MeshCore contact QR for {{$l.Display}}"></div>{{end}}
            <code class="pk d-block mt-2">{{$l.URL}}</code>
            <div class="text-secondary small mt-1">Scan to add this contact in the MeshCore app.</div>
          </div>
        </div>
        {{else if $l.Href}}
        <a class="list-group-item list-group-item-action d-flex align-items-center gap-2" href="{{$l.Href}}" target="_blank" rel="noopener noreferrer nofollow">
          <span class="text-secondary d-flex" title="{{$l.PlatformName}}">{{template "link-icon" $l.Platform}}</span>
          <span class="flex-fill text-truncate">{{$l.Display}}</span>
          {{if $l.IsPrimary}}<span class="badge bg-primary-lt">Primary</span>{{end}}
          <span class="text-secondary d-flex">{{template "icon-arrow-right" ""}}</span>
        </a>
        {{else}}
        <div class="list-group-item d-flex align-items-center gap-2">
          <span class="text-secondary d-flex" title="{{$l.PlatformName}}">{{template "link-icon" $l.Platform}}</span>
          <span class="flex-fill text-truncate">{{$l.Display}}</span>
          {{if $l.IsPrimary}}<span class="badge bg-primary-lt">Primary</span>{{end}}
        </div>
        {{end}}
        {{end}}
      </div>
    </div>
  </div>
  {{end}}
</div>

<a class="back-link mt-3" href="{{.RootURL}}/orgs">{{template "icon-arrow-left" "me-1"}}All organizations</a>
{{end}}