{{/* org-links-modal is the htmx fragment swapped into #org-links-modal. The form
     (data-link-editor) is wired up by link-editor.js, which re-initializes on
     htmx:afterSwap. It posts via htmx so a server validation error re-renders this
     fragment in place (modal stays open, entered rows preserved); on success the
     handler sends HX-Redirect to reload the org page. Per-platform config comes
     from the window.MESHTENDER_LINK_PLATFORMS global set on the page. */}}
{{define "org-links-modal"}}
<div class="modal-header">
  <h2 class="modal-title">Edit links</h2>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  {{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
  <p class="text-secondary">Social media and other sites for your organization. These appear on your public page.</p>
  <form method="post" action="/orgs/{{.OrgSlug}}/links" data-link-editor id="org-links-form"
        hx-post="/orgs/{{.OrgSlug}}/links" hx-target="#org-links-modal-content" hx-swap="innerHTML">
    <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>
    </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>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</button>
  <button type="submit" form="org-links-form" class="btn btn-primary">Save links</button>
</div>
{{end}}