{{define "content"}}
<div class="container-fluid p-3">
  <h4 class="mb-3">Settings</h4>
  <div class="row g-3">
    <div class="col-md-3 col-lg-2">
      {{template "settings_nav" "general"}}
    </div>
    <div class="col-md-9 col-lg-10" style="max-width: 800px">

  <div class="card mb-4">
    <div class="card-header py-2 fw-semibold">General</div>
    <div class="card-body">
      <form method="post" action="/settings/general" class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Site Name</label>
          <input type="text" class="form-control" name="site_name" value="{{.SiteName}}">
        </div>
        <div class="col-md-3">
          <label class="form-label">Asset ID Prefix</label>
          <input type="text" class="form-control" name="asset_id_prefix" value="{{.AssetPrefix}}">
        </div>
        <div class="col-md-3">
          <label class="form-label">Asset ID Padding</label>
          <input type="number" class="form-control" name="asset_id_padding" value="{{.AssetPadding}}" min="1" max="12">
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-header py-2 fw-semibold">Statuses</div>
    <div class="table-responsive">
      <table class="table mb-0 align-middle">
        <thead><tr><th>Order</th><th>Preview</th><th>Name &amp; Color</th><th></th></tr></thead>
        <tbody>
          {{range $i, $st := .Statuses}}
          <tr>
            <td class="text-nowrap">
              <form method="post" action="/settings/statuses/{{$st.ID}}/reorder" class="d-inline">
                <input type="hidden" name="dir" value="up">
                <button type="submit" class="btn btn-sm btn-outline-secondary" {{if eq $i 0}}disabled{{end}}><i class="bi bi-arrow-up"></i></button>
              </form>
              <form method="post" action="/settings/statuses/{{$st.ID}}/reorder" class="d-inline">
                <input type="hidden" name="dir" value="down">
                <button type="submit" class="btn btn-sm btn-outline-secondary" {{if eq (add $i 1) (len $.Statuses)}}disabled{{end}}><i class="bi bi-arrow-down"></i></button>
              </form>
            </td>
            <td><span class="badge text-bg-{{$st.Color}}">{{$st.Name}}</span></td>
            <td>
              <form method="post" action="/settings/statuses/{{$st.ID}}" class="d-flex gap-2 align-items-center">
                <input type="text" class="form-control form-control-sm" name="name" value="{{$st.Name}}" style="max-width:160px" required>
                <select class="form-select form-select-sm" name="color" style="max-width:130px">
                  {{range (list "primary" "secondary" "success" "danger" "warning" "info" "dark")}}
                  <option value="{{.}}" {{if eq . $st.Color}}selected{{end}}>{{.}}</option>
                  {{end}}
                </select>
                <button type="submit" class="btn btn-sm btn-outline-secondary">Save</button>
              </form>
            </td>
            <td>
              <form method="post" action="/settings/statuses/{{$st.ID}}/delete" onsubmit="return confirm('Delete this status?')">
                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    <div class="card-body border-top">
      <h6>Add Status</h6>
      <form method="post" action="/settings/statuses" class="d-flex gap-2 align-items-end">
        <div>
          <label class="form-label small mb-1">Name</label>
          <input type="text" class="form-control form-control-sm" name="name" required>
        </div>
        <div>
          <label class="form-label small mb-1">Color</label>
          <select class="form-select form-select-sm" name="color">
            {{range (list "primary" "secondary" "success" "danger" "warning" "info" "dark")}}<option value="{{.}}">{{.}}</option>{{end}}
          </select>
        </div>
        <button type="submit" class="btn btn-sm btn-primary">Add</button>
      </form>
    </div>
  </div>

    </div>
  </div>
</div>
{{end}}