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

<div class="card">
  <div class="card-meta">
    <span id="state-section">
      {{if eq .Issue.State "closed"}}
      <span class="state-closed" id="issue-state">{{.Issue.State}}</span>
      <button class="btn btn-secondary" hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/state" hx-vals='{"state":"open"}' hx-target="#state-section" hx-swap="innerHTML">Reopen Issue</button>
      {{else}}
      <span class="state-open" id="issue-state">{{.Issue.State}}</span>
      <button class="btn btn-danger" hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/state" hx-vals='{"state":"closed"}' hx-target="#state-section" hx-swap="innerHTML">Close Issue</button>
      {{end}}
    </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 .RenderedBody}}
  <div class="card-body markdown-body">{{.RenderedBody}}</div>
  {{else if .Issue.Body}}
  <div class="card-body">{{.Issue.Body}}</div>
  {{end}}
</div>

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

<div class="card" style="margin-top:1rem;">
  <h2>Add Comment</h2>
  <form hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/comments" hx-target="#comments-list" hx-swap="beforeend" hx-on::after-request="if(event.detail.successful) this.reset()">
    <textarea name="body" rows="4" placeholder="Write a comment..." required style="width:100%;margin-bottom:0.5rem;"></textarea>
    <button type="submit" class="btn btn-primary" style="width:auto;padding:0.5rem 1rem;">Comment</button>
  </form>
</div>

<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}}