MeshTender/internal/core/templates/org.html

{{define "title"}}{{.Org.Name}} · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Organization · you're {{if .IsAdmin}}an admin{{else}}a member{{end}}</div>
    <h2 class="page-title">{{.Org.Name}}</h2>
  </div>
  <div class="col-auto ms-auto d-print-none">
    <div class="dropdown">
      <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</button>
      <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="/orgs/{{.Org.Slug}}?view=public">{{template "icon-world" "dropdown-item-icon"}}View public page</a>
        <div class="dropdown-divider"></div>
        <form method="post" action="/orgs/{{.Org.Slug}}/leave" class="m-0" data-confirm="Leave this organization?">
          <button type="submit" class="dropdown-item text-danger">{{template "icon-logout" "dropdown-item-icon"}}Leave organization</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{end}}
{{define "content"}}
{{template "org-tabs" .Nav}}
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}

<!-- Summary stats -->
<div class="row row-cards">
  <div class="col-sm-6 col-lg-3">
    <div class="card card-sm">
      <div class="card-body">
        <div class="row align-items-center">
          <div class="col-auto"><span class="bg-primary text-white avatar">{{template "icon-users" ""}}</span></div>
          <div class="col"><div class="h1 mb-0">{{.MemberCount}}</div><div class="text-secondary">Member{{if ne .MemberCount 1}}s{{end}}</div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card card-sm">
      <div class="card-body">
        <div class="row align-items-center">
          <div class="col-auto"><span class="bg-green text-white avatar">{{template "icon-user" ""}}</span></div>
          <div class="col"><div class="h1 mb-0">{{.AdminCount}}</div><div class="text-secondary">Admin{{if ne .AdminCount 1}}s{{end}}</div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card card-sm">
      <div class="card-body">
        <div class="row align-items-center">
          <div class="col-auto"><span class="bg-azure text-white avatar">{{template "icon-antenna" ""}}</span></div>
          <div class="col"><div class="h1 mb-0">{{.RepeaterCount}}</div><div class="text-secondary">Repeater{{if ne .RepeaterCount 1}}s{{end}}</div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card card-sm">
      <div class="card-body">
        <div class="row align-items-center">
          <div class="col-auto"><span class="bg-purple text-white avatar">{{template "icon-map-pin" ""}}</span></div>
          <div class="col text-truncate">
            <div class="h1 mb-0 text-truncate">{{if .Org.Region}}{{.Org.Region}}{{else}}<span class="text-secondary fw-normal">Not set</span>{{end}}</div>
            <div class="text-secondary">Region</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row row-cards mt-1">
  <!-- Left column: details -->
  <div class="col-lg-8">
    {{if not .IsAdmin}}
    <div class="card">
      <div class="card-header"><h3 class="card-title">About</h3></div>
      <div class="card-body">
        {{if .Org.Description}}
        <div class="markdown">{{markdown .Org.Description}}</div>
        {{else}}
        <p class="text-secondary mb-0">No description yet.</p>
        {{end}}
      </div>
    </div>
    {{if .Links}}
    <div class="card mt-3">
      <div class="card-header"><h3 class="card-title">Links</h3></div>
      <div class="list-group list-group-flush">
        {{range .Links}}
        {{if .Href}}
        <a class="list-group-item list-group-item-action d-flex align-items-center gap-2" href="{{.Href}}" target="_blank" rel="noopener noreferrer nofollow">
          <span class="text-secondary d-flex" title="{{.PlatformName}}">{{template "link-icon" .Platform}}</span>
          <span class="flex-fill text-truncate">{{.Display}}</span>
          <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="{{.PlatformName}}">{{template "link-icon" .Platform}}</span>
          <span class="flex-fill text-truncate">{{.Display}}</span>
        </div>
        {{end}}
        {{end}}
      </div>
    </div>
    {{end}}
    {{end}}

    {{if .IsAdmin}}
    <div class="card">
      <div class="card-header"><h3 class="card-title">Organization profile <span class="text-secondary">(public)</span></h3></div>
      <div class="card-body">
        <form method="post" action="/orgs/{{.Org.Slug}}/edit">
          <div class="mb-3">
            <label class="form-label" for="org_name">Name</label>
            <input type="text" class="form-control" id="org_name" name="name" value="{{.Org.Name}}" maxlength="80" required>
          </div>
          <div class="mb-3">
            <label class="form-label" for="org_slug">URL slug</label>
            <div class="input-group">
              <span class="input-group-text">/orgs/</span>
              <input type="text" class="form-control font-monospace" id="org_slug" name="slug" value="{{.Org.Slug}}"
                     pattern="[a-z0-9]+(-[a-z0-9]+)*" minlength="3" maxlength="40" required>
            </div>
            <small class="form-hint">Lowercase letters, numbers, and hyphens. Changing this changes the organization's URL.</small>
          </div>
          <div class="mb-3">
            <label class="form-label" for="org_region">Region <span class="text-secondary">(optional)</span></label>
            <input type="text" class="form-control" id="org_region" name="region" value="{{.Org.Region}}" maxlength="120" placeholder="e.g. Buffalo, NY">
          </div>
          <div class="mb-3">
            <label class="form-label" for="org_description">Description</label>
            <textarea class="form-control" id="org_description" name="description" rows="3" maxlength="2000" placeholder="What this organization is about, where it operates, etc.">{{.Org.Description}}</textarea>
            <small class="form-hint">Markdown supported — headings, lists, links, and emphasis.</small>
          </div>
          <button type="submit" class="btn btn-primary">Save profile</button>
        </form>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-header"><h3 class="card-title">Links <span class="text-secondary">(public)</span></h3></div>
      <div class="card-body">
        <p class="text-secondary">Social media and other sites for your organization. These appear on your public page.</p>
        <form method="post" action="/orgs/{{.Org.Slug}}/links" data-link-editor>
          <div data-link-rows>
            {{range .Links}}
            <div class="link-row row g-2 mb-2 align-items-center">
              <div class="col-12 col-sm-3">
                <select class="form-select link-platform" name="link_platform" aria-label="Link type">
                  {{$sel := .Platform}}
                  {{range $.Platforms}}<option value="{{.Key}}"{{if eq .Key $sel}} selected{{end}}>{{.Name}}</option>{{end}}
                </select>
              </div>
              <div class="col-12 col-sm-3 link-label-col">
                <input class="form-control link-label" name="link_label" value="{{.Label}}" maxlength="60" placeholder="Label (optional)" aria-label="Link label">
              </div>
              <div class="col">
                <input class="form-control link-value" type="text" name="link_url" value="{{.URL}}" maxlength="300" aria-label="Link value">
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-ghost-danger btn-icon remove-link" aria-label="Remove link">{{template "icon-trash" ""}}</button>
              </div>
            </div>
            {{end}}
          </div>
          <div class="btn-list mt-2">
            <button type="button" class="btn" data-link-add>{{template "icon-plus" "me-1"}}Add link</button>
            <button type="submit" class="btn btn-primary">Save links</button>
          </div>
          <template data-link-tpl>
            <div class="link-row row g-2 mb-2 align-items-center">
              <div class="col-12 col-sm-3">
                <select class="form-select link-platform" name="link_platform" aria-label="Link type">
                  {{range .Platforms}}<option value="{{.Key}}">{{.Name}}</option>{{end}}
                </select>
              </div>
              <div class="col-12 col-sm-3 link-label-col">
                <input class="form-control link-label" name="link_label" maxlength="60" placeholder="Label (optional)" aria-label="Link label">
              </div>
              <div class="col">
                <input class="form-control link-value" type="text" name="link_url" maxlength="300" aria-label="Link value">
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-ghost-danger btn-icon remove-link" aria-label="Remove link">{{template "icon-trash" ""}}</button>
              </div>
            </div>
          </template>
        </form>
        <script nonce="{{.Nonce}}">window.MESHTENDER_LINK_PLATFORMS = {{.PlatformsJS}};</script>
        <script src="/static/link-editor.js"></script>
      </div>
    </div>

    {{/* Custom domains — hidden for now; the hosting/TLS infrastructure isn't in
         place yet. Re-enable this card (plus the domains data in pageOrg and the
         /domains routes in web.go) once it is.
    <div class="card mt-3">
      <div class="card-header"><h3 class="card-title">Custom domains</h3></div>
      <div class="card-body">
        <p class="text-secondary">
          Point your own domain at MeshTender (CNAME it to this app). Once verified, visiting that
          domain shows this organization's public page. Sign-in and management always happen on the
          main site. TLS certificates for your domain are handled by your hosting/ops setup.
        </p>
        {{if .Domains}}
        <div class="list-group list-group-flush mb-3">
          {{range .Domains}}
          <div class="list-group-item px-0">
            <div class="d-flex align-items-center gap-2 mb-1">
              <span class="fw-bold font-monospace">{{.Hostname}}</span>
              {{if .Verified}}
              <span class="badge bg-success-lt">verified</span>
              {{else}}
              <span class="badge bg-warning-lt">pending verification</span>
              {{end}}
              <form method="post" action="/orgs/{{$.Org.Slug}}/domains/delete" class="m-0 ms-auto">
                <input type="hidden" name="domain_id" value="{{.ID}}">
                <button type="submit" class="btn btn-sm btn-ghost-danger">Remove</button>
              </form>
            </div>
            {{if not .Verified}}
            <p class="text-secondary mb-2">Add this DNS TXT record, then click Verify:</p>
            <div class="mb-2">
              <code class="d-block">{{$.TXTName}}{{.Hostname}}</code>
              <code class="d-block">TXT&nbsp;&nbsp;{{.VerificationToken}}</code>
            </div>
            <form method="post" action="/orgs/{{$.Org.Slug}}/domains/verify" class="m-0">
              <input type="hidden" name="domain_id" value="{{.ID}}">
              <button type="submit" class="btn btn-sm">Verify</button>
            </form>
            {{end}}
          </div>
          {{end}}
        </div>
        {{end}}
        <form method="post" action="/orgs/{{.Org.Slug}}/domains">
          <div class="mb-3">
            <label class="form-label" for="add_domain">Add a domain</label>
            <input type="text" class="form-control font-monospace" id="add_domain" name="hostname" placeholder="mesh.example.org" maxlength="253">
          </div>
          <button type="submit" class="btn btn-primary">Add domain</button>
        </form>
      </div>
    </div>
    */}}
    {{end}}
  </div>

  <!-- Right column: map -->
  <div class="col-lg-4">
    {{if .HasMap}}
    <div class="card">
      <div class="card-header"><h3 class="card-title">Repeaters</h3></div>
      <div class="card-body p-2">
        <link rel="stylesheet" href="/static/leaflet.css">
        <div id="map" style="height:260px" role="region" aria-label="Map of organization repeater locations"></div>
        <script src="/static/leaflet.js"></script>
        <script src="/static/meshmap.js"></script>
        <script nonce="{{.Nonce}}">
          meshMap('map', [
            {{range .Repeaters}}{{if .HasLocation}}{name: {{.Name}}, lat: {{.Lat}}, lon: {{.Lon}}},{{end}}{{end}}
          ]);
        </script>
      </div>
    </div>
    {{end}}
  </div>
</div>

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