{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <!-- Issue Header -->
  <div class="mb-4 pb-3" style="border-bottom:1px solid hsl(var(--border));">
    <div class="flex items-start justify-between flex-wrap gap-3">
      <div class="flex items-center gap-2 flex-wrap">
        <h1 class="text-lg font-bold" style="margin:0;">{{.Issue.Title}}</h1>
        <span class="font-mono text-base text-muted">#{{.Issue.Number}}</span>
      </div>
      {{if .CanToggleIssue}}
        <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/issues/{{.Issue.Number}}/state" style="margin:0;">
          <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
          {{if .Issue.IsClosed}}
            <input type="hidden" name="state" value="open">
            <button type="submit" class="btn btn-outline btn-sm">
              {{icon "alert-circle" "size-3.5"}}
              <span>{{t .Lang "issue.reopen_btn"}}</span>
            </button>
          {{else}}
            <input type="hidden" name="state" value="closed">
            <button type="submit" class="btn btn-outline btn-sm">
              {{icon "check" "size-3.5"}}
              <span>{{t .Lang "issue.close_btn"}}</span>
            </button>
          {{end}}
        </form>
      {{end}}
    </div>

    <div class="flex items-center gap-2 mt-2 text-xs text-muted">
      {{if .Issue.IsClosed}}
        <span class="badge badge-outline">{{icon "check" "size-3.5"}} {{t .Lang "issue.status.closed"}}</span>
      {{else}}
        <span class="badge badge-primary">{{icon "alert-circle" "size-3.5"}} {{t .Lang "issue.status.open"}}</span>
      {{end}}
      <a href="/{{.Issue.AuthorUsername}}" class="font-medium" style="color:hsl(var(--foreground));">@{{.Issue.AuthorUsername}}</a>
      <span>·</span>
      <span>{{timeAgo .Issue.CreatedAt .Lang}}</span>
    </div>
  </div>

  <!-- Issue Description Card -->
  <div class="card mb-4">
    <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.3);">
      <div class="flex items-center gap-2">
        {{avatar .Issue.AuthorUsername .Issue.AuthorAvatar}}
        <a href="/{{.Issue.AuthorUsername}}" class="font-semibold">@{{.Issue.AuthorUsername}}</a>
        <span class="text-muted">{{timeAgo .Issue.CreatedAt .Lang}}</span>
      </div>
    </div>
    <div class="card-body markdown-body">
      {{if .Issue.Body}}
        {{renderMD .Issue.Body}}
      {{else}}
        <span class="text-xs text-muted">—</span>
      {{end}}
    </div>
  </div>

  <!-- Comments -->
  {{if .Comments}}
    <div class="flex flex-col gap-3 mb-4">
      {{range .Comments}}
        <div class="card">
          <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.2);">
            <div class="flex items-center gap-2">
              {{avatar .AuthorUsername .AuthorAvatar}}
              <a href="/{{.AuthorUsername}}" class="font-semibold">@{{.AuthorUsername}}</a>
              <span class="text-muted">{{timeAgo .CreatedAt $.Lang}}</span>
            </div>
          </div>
          <div class="card-body markdown-body">
            {{renderMD .Body}}
          </div>
        </div>
      {{end}}
    </div>
  {{end}}

  <!-- Add Comment Form -->
  {{if .CurrentUser}}
    <div class="card">
      <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/issues/{{.Issue.Number}}/comments" class="card-body flex flex-col gap-2.5">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        <textarea name="body" class="textarea" rows="4" placeholder="{{t .Lang "issue.comment_ph"}}" required maxlength="20000"></textarea>
        <div class="flex items-center justify-end">
          <button type="submit" class="btn btn-primary btn-sm">{{t .Lang "issue.comment_btn"}}</button>
        </div>
      </form>
    </div>
  {{end}}
</div>
{{end}}