{{define "content"}}
<section class="hero">
  <p class="eyebrow">{{.Eyebrow}}</p>
  <h1>{{.Heading}}</h1>
  <p class="lede">{{.Description}}</p>
</section>

{{if .Form.Error}}
<section class="alert-card alert-error">
  <p>{{.Form.Error}}</p>
</section>
{{end}}

<section class="section-grid">
  <article class="section-card">
    <div class="section-heading">
      <h2>Tag Details</h2>
      <p>Use stable tag slugs so projects and future access rules can reference them predictably.</p>
    </div>

    <form class="stack-form" method="post" action="{{.Form.Action}}">
      {{template "csrf_field" .}}
      <label class="field">
        <span>Name</span>
        <input type="text" name="name" value="{{.Form.Name}}" maxlength="120" required>
      </label>

      <label class="field">
        <span>Slug</span>
        <input type="text" name="slug" value="{{.Form.Slug}}" maxlength="120" placeholder="auto-generated from the name">
      </label>

      <label class="field">
        <span>Description</span>
        <textarea name="description" rows="4">{{.Form.Description}}</textarea>
      </label>

      <div class="button-row">
        <button class="button" type="submit">{{.Form.SubmitLabel}}</button>
        <a class="button button-secondary" href="/admin/tags">Back to tags</a>
      </div>
    </form>
  </article>

  {{if .Tag}}
  <article class="section-card">
    <div class="section-heading">
      <h2>Delete Tag</h2>
      <p>Tags can only be deleted once they are no longer attached to any project.</p>
    </div>

    {{if .Form.CanDelete}}
    <form class="stack-form" method="post" action="{{.Form.DeleteAction}}">
      {{template "csrf_field" .}}
      <button class="button button-danger" type="submit">Delete tag</button>
    </form>
    {{else}}
    <p class="empty-copy">Detach this tag from all projects before deleting it.</p>
    {{end}}
  </article>
  {{end}}
</section>

{{if .Tag}}
<section class="section-card section-card-wide">
  <div class="section-heading">
    <h2>Assigned Projects</h2>
    <p>These projects currently use this tag.</p>
  </div>

  {{if .Projects}}
  <div class="resource-grid compact-grid">
    {{range .Projects}}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3><a href="/admin/projects/{{.ID}}">{{.Name}}</a></h3>
          <p class="resource-slug">{{.Slug}}</p>
        </div>
        <span class="pill {{if .IsActive}}pill-success{{else}}pill-muted{{end}}">
          {{if .IsActive}}Active{{else}}Archived{{end}}
        </span>
      </div>
      <p class="resource-description">{{if .Description}}{{.Description}}{{else}}No description yet.{{end}}</p>
    </article>
    {{end}}
  </div>
  {{else}}
  <p class="empty-copy">This tag is not attached to any project yet.</p>
  {{end}}
</section>
{{end}}
{{end}}
