{#include layout}
{#title}{issue.title} – {repo.name}{/title}
<div class="repo-layout">
{#include RepositoryResource/sidebar nav=nav active='issues' /}
<section class="repo-main">
<p class="issue-back"><a href="/repos/{repo.ownerHandle}/{repo.name}/issues">← Issues</a></p>
<div class="issue-detail">
<div class="issue-content">
<header class="issue-header">
<h2 class="issue-heading">{issue.title} <span class="issue-no">#{issue.number}</span></h2>
{#if owner}
<div class="issue-header-actions">
<a class="btn btn-secondary btn-sm" href="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/edit">Edit</a>
<form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/delete"
onsubmit="return confirm('Delete this issue? This cannot be undone.')">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</div>
{/if}
</header>
<div class="issue-byline">
<span class="badge status-{issue.status}">{issue.status.label}</span>
<span class="issue-person">{#avatar user=issue.author /} <span><strong>{issue.author.username}</strong> opened this issue</span></span>
</div>
{#if descriptionHtml}
<div class="panel issue-desc">
<div class="readme-body">{descriptionHtml.raw}</div>
</div>
{#else}
<p class="issue-nodesc muted">No description provided.</p>
{/if}
<section class="comments">
<h3 class="comments-title">Comments <span class="ct">{comments.size()}</span></h3>
{#if comments.isEmpty()}
<p class="muted">No comments yet.</p>
{/if}
{#for c in comments}
<div class="comment-row">
<div class="comment">
<div class="comment-head">
<span class="who">{#avatar user=c.author /} <strong>{c.author.username}</strong></span>
<span class="muted comment-when">{c.createdAt}</span>
</div>
<div class="comment-body">{c.body}</div>
</div>
{#if owner || c.author.id == currentUserId}
<form class="comment-del-form" method="post"
action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/comments/{c.id}/delete">
<button type="submit" class="comment-del" title="Delete comment" aria-label="Delete comment">
<svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><path fill="currentColor" d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 9Z"/></svg>
</button>
</form>
{/if}
</div>
{/for}
{#if loggedIn}
<form class="comment-form" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/comments">
<textarea name="body" rows="3" placeholder="Leave a comment" required autocomplete="off"></textarea>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
{#else}
<p class="muted">Log in to comment.</p>
{/if}
</section>
</div>
<aside class="issue-side">
<section class="issue-side-block">
<h3 class="issue-side-label">Status</h3>
{#if owner}
<form class="status-picker" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/status">
{#for status in statuses}
<button type="submit" name="status" value="{status}"
class="status-opt status-opt-{status}{#if status == issue.status} is-current{/if}"
{#if status == issue.status}aria-current="true" disabled{/if}>{status.label}</button>
{/for}
</form>
{#else}
<span class="badge status-{issue.status}">{issue.status.label}</span>
{/if}
</section>
<section class="issue-side-block">
<h3 class="issue-side-label">Assignee</h3>
{#if owner}
{! GitHub-style: the row is the trigger; clicking it opens a floating pick-a-person menu !}
<details class="assignee-pop">
<summary class="assignee-trigger">
{#if issue.assignee}
{#avatar user=issue.assignee /} <span class="assignee-name">{issue.assignee.username}</span>
{#else}
<span class="muted">No one assigned</span>
{/if}
<span class="assignee-caret" aria-hidden="true">▾</span>
</summary>
<div class="assignee-menu">
<p class="assignee-menu-head">Assign this issue</p>
{! free text handles any user; Enter submits. datalist offers the same names as the list !}
<form class="assignee-search" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/assign">
<input type="text" name="assignee" list="assignees" placeholder="Type a username…" autocomplete="off">
<datalist id="assignees">
{#for candidate in assignees}
<option value="{candidate.username}">
{/for}
</datalist>
</form>
<ul class="assignee-options">
{#for candidate in assignees}
<li>
<form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/assign">
<button type="submit" name="assignee" value="{candidate.username}"
class="assignee-option{#if issue.assignee && candidate.username == issue.assignee.username} is-selected{/if}">
<span class="assignee-check" aria-hidden="true">{#if issue.assignee && candidate.username == issue.assignee.username}✓{/if}</span>
{#avatar user=candidate /} <span>{candidate.username}</span>
</button>
</form>
</li>
{/for}
</ul>
{#if issue.assignee}
{! separate form with no assignee field: posts blank, which unassigns the issue !}
<form class="assignee-clear" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/issues/{issue.number}/assign">
<button type="submit" class="assignee-option assignee-clear-btn">Clear assignee</button>
</form>
{/if}
</div>
</details>
{#else}
<div class="assignee-current">
{#if issue.assignee}
{#avatar user=issue.assignee /} <span class="assignee-name">{issue.assignee.username}</span>
{#else}
<span class="muted">No one assigned</span>
{/if}
</div>
{/if}
</section>
</aside>
</div>
</section>
</div>
{/include}