{{define "content"}}
<h1>{{.Issue.Title}}</h1>

<div class="card">
  <div class="card-meta">
    <span class="state-open">{{.Issue.State}}</span>
    <span>{{.Issue.RepoOwner}}/{{.Issue.RepoName}} #{{.Issue.Number}}</span>
    {{range .Issue.Labels}}
    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
    {{end}}
  </div>
  {{if .Issue.Body}}
  <div class="card-body">{{.Issue.Body}}</div>
  {{end}}
</div>

{{if .Comments}}
<h2>Comments</h2>
{{range .Comments}}
<div class="comment">
  <div class="comment-header">
    <strong>{{.User}}</strong>
    <span>{{.CreatedAt}}</span>
  </div>
  <div class="comment-body">{{.Body}}</div>
</div>
{{end}}
{{end}}

<div class="card" style="margin-top:1rem;">
  <h2>Actions</h2>
  <form hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/labels" hx-swap="outerHTML" style="margin-bottom:0.5rem;">
    <div class="filter-bar" style="margin-bottom:0.5rem;">
      <select name="label_id">
        {{range .AvailableLabels}}
        <option value="{{.ID}}">{{.Name}}</option>
        {{end}}
      </select>
      <button type="submit" class="btn btn-secondary" style="width:auto;padding:0.5rem 1rem;">Apply Label</button>
    </div>
  </form>
</div>
{{end}}