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

<div class="card">
  <div class="card-meta">
    <span class="type-badge type-pull">PR</span>
    {{if eq .Pull.State "closed"}}<span class="state-closed">{{.Pull.State}}</span>{{else}}<span class="state-open">{{.Pull.State}}</span>{{end}}
    <span>{{.Pull.RepoOwner}}/{{.Pull.RepoName}} #{{.Pull.Number}}</span>
    {{range .Pull.Labels}}
    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
    {{end}}
  </div>
  <div class="card-meta" style="margin-top:0.5rem;">
    <span class="diff-add">+{{.Pull.Additions}}</span>
    <span class="diff-del">-{{.Pull.Deletions}}</span>
    {{if .Pull.Mergeable}}<span style="color:var(--accent-green);">Mergeable</span>{{end}}
  </div>
  <div class="card-meta" style="margin-top:0.5rem;">
    <span id="state-section">
      {{if eq .Pull.State "closed"}}
      <span class="state-closed" id="pull-state">{{.Pull.State}}</span>
      <button class="btn btn-secondary" hx-post="/pulls/{{.Pull.RepoOwner}}/{{.Pull.RepoName}}/{{.Pull.Number}}/state" hx-vals='{"state":"open"}' hx-target="#state-section" hx-swap="innerHTML">Reopen PR</button>
      {{else}}
      <span class="state-open" id="pull-state">{{.Pull.State}}</span>
      <button class="btn btn-danger" hx-post="/pulls/{{.Pull.RepoOwner}}/{{.Pull.RepoName}}/{{.Pull.Number}}/state" hx-vals='{"state":"closed"}' hx-target="#state-section" hx-swap="innerHTML">Close PR</button>
      {{end}}
    </span>
  </div>
  {{if .RenderedBody}}
  <div class="card-body markdown-body">{{.RenderedBody}}</div>
  {{else if .Pull.Body}}
  <div class="card-body">{{.Pull.Body}}</div>
  {{end}}
</div>

<div class="card" style="margin-top:1rem;">
  <h2>Submit Review</h2>
  <form hx-post="/pulls/{{.Pull.RepoOwner}}/{{.Pull.RepoName}}/{{.Pull.Number}}/review" hx-swap="outerHTML">
    <div class="form-group">
      <label for="review-body">Comment</label>
      <textarea id="review-body" name="body" placeholder="Leave a review comment..."></textarea>
    </div>
    <div class="review-options">
      <label class="review-option">
        <input type="radio" name="event" value="COMMENT" checked>
        <span>Comment</span>
      </label>
      <label class="review-option">
        <input type="radio" name="event" value="APPROVED">
        <span>Approve</span>
      </label>
      <label class="review-option">
        <input type="radio" name="event" value="REQUEST_CHANGES">
        <span>Request Changes</span>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit Review</button>
  </form>
</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}}
<p class="empty" style="margin-top:1rem;">No comments yet.</p>
{{end}}
{{end}}