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

<div class="card">
  <div class="card-meta">
    <span class="type-badge type-pull">PR</span>
    <span class="state-open">{{.Pull.State}}</span>
    <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>
  {{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>
{{end}}