{{/* The profile editor. Admins normally reach it as the config-profile-modal
     fragment swapped into #config-profile-modal on the Configuration page; it
     posts via htmx so a validation error re-renders the fragment in place (modal
     stays open, entered values preserved) and a save sends HX-Redirect back to
     the config page. The full page below is the no-JS / direct-link fallback, so
     it carries the same form without the htmx attributes. */}}

{{define "title"}}{{if .ProfileID}}Edit profile{{else}}Add profile{{end}} · {{.Org.Name}} · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">{{.Org.Name}} · Configuration</div>
    <h1 class="page-title fs-1">{{if .ProfileID}}Edit profile{{else}}Add profile{{end}}</h1>
  </div>
  <div class="col-auto ms-auto d-print-none">
    <a class="btn" href="/orgs/{{.Org.Slug}}/config">Back to configuration</a>
  </div>
</div>
{{end}}
{{define "content"}}
{{template "org-tabs" .Nav}}

{{template "profile-editor-alerts" .}}

<div class="card">
  <div class="card-body">
    <form method="post" action="{{.Action}}">
      {{template "profile-editor-fields" .}}
      <div class="btn-list mt-3">
        <button type="submit" class="btn btn-primary">{{if .ProfileID}}Save profile{{else}}Create profile{{end}}</button>
        <a class="btn" href="/orgs/{{.Org.Slug}}/config">Cancel</a>
      </div>
    </form>
  </div>
</div>
{{end}}

{{/* config-profile-modal is the htmx fragment swapped into #config-profile-modal. */}}
{{define "config-profile-modal"}}
<div class="modal-header">
  <h2 class="modal-title">{{if .ProfileID}}Edit profile{{else}}Add profile{{end}}</h2>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  {{template "profile-editor-alerts" .}}
  <form method="post" action="{{.Action}}" id="config-profile-form"
        hx-post="{{.Action}}" hx-target="#config-profile-modal-content" hx-swap="innerHTML">
    {{template "profile-editor-fields" .}}
  </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="config-profile-form" class="btn btn-primary" data-testid="save-profile">{{if .ProfileID}}Save profile{{else}}Create profile{{end}}</button>
</div>
{{end}}

{{/* profile-editor-alerts renders the validation errors and the risky-command
     warning, shared by the page and the modal. */}}
{{define "profile-editor-alerts"}}
{{if .Errors}}
<div class="alert alert-danger">
  <div>
    <div class="fw-bold">Nothing was saved — fix these first:</div>
    <ul class="mb-0">{{range .Errors}}<li>{{.}}</li>{{end}}</ul>
  </div>
</div>
{{end}}
{{if .RiskyWarn}}
<div class="alert alert-warning">
  <div>
    <div class="fw-bold">Risky commands in this profile</div>
    <p class="mb-1">These can take over or brick a node — included on purpose?</p>
    <ul class="mb-0">{{range .RiskyWarn}}<li><code>{{.}}</code></li>{{end}}</ul>
  </div>
</div>
{{end}}
{{end}}

{{/* profile-editor-fields are the form controls themselves — the <form> element
     around them differs between the page and the modal. */}}
{{define "profile-editor-fields"}}
<div class="mb-3">
  <label class="form-label" for="profile_name">Profile name</label>
  <input class="form-control" id="profile_name" name="profile_name" value="{{.Name}}" placeholder="ESP32" maxlength="60" autofocus>
</div>
<div class="mb-1">
  <label class="form-label" for="profile_steps">Base settings</label>
  <textarea class="form-control font-monospace" id="profile_steps" name="profile_steps" rows="10" spellcheck="false" placeholder="set tx 22&#10;# notes start with #">{{.StepsText}}</textarea>
  <small class="form-hint">One command per line; lines starting with <code>#</code> are notes. Put <code>{{"{{ region }}"}}</code> on its own line to insert this organization's region settings there — otherwise they run after all steps.</small>
</div>
{{end}}