{#include layout}
{#title}{mr.title} – {repo.name}{/title}
<div class="repo-layout">
{#include RepositoryResource/sidebar nav=nav active='merge-requests' /}
<section class="repo-main">
<p><a href="/repos/{repo.ownerHandle}/{repo.name}/merge-requests">&larr; Merge requests</a></p>
<h2>{mr.title} <span class="issue-no">!{mr.number}</span></h2>
<p>
    <span class="badge status-{mr.status}">{mr.status.label}</span>
    <span class="mr-branches"><code>{mr.sourceBranch}</code> &rarr; <code>{mr.targetBranch}</code></span>
    <span class="muted">opened by {#avatar user=mr.author /} {mr.author.username}</span>
</p>
{#if mr.description}
<pre class="issue-desc">{mr.description}</pre>
{/if}
<div class="mr-meta">
    <div class="mr-meta-field">
        <h3 class="issue-side-label">Assignee</h3>
        {#if owner}
        <details class="assignee-pop">
            <summary class="assignee-trigger">
                {#if mr.assignee}{#avatar user=mr.assignee /} <span class="assignee-name">{mr.assignee.username}</span>{#else}<span class="muted">No one assigned</span>{/if}
                <span class="assignee-caret" aria-hidden="true">&#9662;</span>
            </summary>
            <div class="assignee-menu">
                <p class="assignee-menu-head">Assign this merge request</p>
                <form class="assignee-search" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/assign">
                    <input type="text" name="assignee" list="mr-people" placeholder="Type a username&hellip;" autocomplete="off">
                </form>
                <ul class="assignee-options">
                    {#for candidate in assignees}
                    <li>
                        <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/assign">
                            <button type="submit" name="assignee" value="{candidate.username}"
                                    class="assignee-option{#if mr.assignee && candidate.username == mr.assignee.username} is-selected{/if}">
                                <span class="assignee-check" aria-hidden="true">{#if mr.assignee && candidate.username == mr.assignee.username}&check;{/if}</span>
                                {#avatar user=candidate /} <span>{candidate.username}</span>
                            </button>
                        </form>
                    </li>
                    {/for}
                </ul>
                {#if mr.assignee}
                <form class="assignee-clear" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/assign">
                    <button type="submit" class="assignee-option assignee-clear-btn">Clear assignee</button>
                </form>
                {/if}
            </div>
        </details>
        {#else}
        <div class="assignee-current">{#if mr.assignee}{#avatar user=mr.assignee /} <span class="assignee-name">{mr.assignee.username}</span>{#else}<span class="muted">No one assigned</span>{/if}</div>
        {/if}
    </div>

    <div class="mr-meta-field">
        <h3 class="issue-side-label">Reviewer</h3>
        {#if owner}
        <details class="assignee-pop">
            <summary class="assignee-trigger">
                {#if mr.reviewer}{#avatar user=mr.reviewer /} <span class="assignee-name">{mr.reviewer.username}</span>{#else}<span class="muted">No reviewer</span>{/if}
                <span class="assignee-caret" aria-hidden="true">&#9662;</span>
            </summary>
            <div class="assignee-menu">
                <p class="assignee-menu-head">Request a review</p>
                <form class="assignee-search" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/reviewer">
                    <input type="text" name="reviewer" list="mr-people" placeholder="Type a username&hellip;" autocomplete="off">
                </form>
                <ul class="assignee-options">
                    {#for candidate in assignees}
                    <li>
                        <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/reviewer">
                            <button type="submit" name="reviewer" value="{candidate.username}"
                                    class="assignee-option{#if mr.reviewer && candidate.username == mr.reviewer.username} is-selected{/if}">
                                <span class="assignee-check" aria-hidden="true">{#if mr.reviewer && candidate.username == mr.reviewer.username}&check;{/if}</span>
                                {#avatar user=candidate /} <span>{candidate.username}</span>
                            </button>
                        </form>
                    </li>
                    {/for}
                </ul>
                {#if mr.reviewer}
                <form class="assignee-clear" method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/reviewer">
                    <button type="submit" class="assignee-option assignee-clear-btn">Clear reviewer</button>
                </form>
                {/if}
            </div>
        </details>
        {#else}
        <div class="assignee-current">{#if mr.reviewer}{#avatar user=mr.reviewer /} <span class="assignee-name">{mr.reviewer.username}</span>{#else}<span class="muted">No reviewer</span>{/if}</div>
        {/if}
    </div>

    <datalist id="mr-people">
        {#for candidate in assignees}
        <option value="{candidate.username}">
        {/for}
    </datalist>
</div>
{#if owner && mr.status.name() == 'OPEN'}
<div class="issue-actions">
    <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/merge">
        <button type="submit" class="btn btn-primary">Merge</button>
    </form>
    <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/close"
          onsubmit="return confirm('Close this merge request without merging?')">
        <button type="submit" class="btn btn-secondary">Close</button>
    </form>
</div>
{/if}
<section class="comments">
    <h3 class="comments-title">Discussion <span class="ct">{discussion.size()}</span></h3>
    {#if discussion.isEmpty()}
    <p class="muted">No comments yet.</p>
    {/if}
    {#for c in discussion}
    <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}/merge-requests/{mr.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}/merge-requests/{mr.number}/discussion">
        <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>
<h3>Changes</h3>
{#if files.isEmpty()}
<p class="muted">No changes to show. The source branch has nothing new over the target.</p>
{#else}
<p class="diffstat-summary">
    <b>{files.size()}</b> file{#if files.size() != 1}s{/if} changed,
    <span class="add">+{additions}</span> <span class="del">-{deletions}</span>
    {#if !loggedIn}<span class="muted">· log in to comment on a line</span>{/if}
</p>
{#for file in files}
<div class="diff-file">
    <div class="diff-file-head">
        <span class="badge ct-{file.changeType}">{file.changeType}</span>
        <code>{file.path}</code>
        <span class="diffstat"><span class="add">+{file.additions}</span> <span class="del">-{file.deletions}</span></span>
    </div>
    <div class="diff-body">
        {#for lv in file.lines}
        <div class="dl {lv.line.type}">
            {#if lv.commentable}
            <input type="checkbox" id="{lv.anchorId}" class="dl-toggle">
            {/if}
            <div class="dl-line">
                <span class="ln">{#if lv.line.oldLine != -1}{lv.line.oldLine}{/if}</span>
                <span class="ln">{#if lv.line.newLine != -1}{lv.line.newLine}{/if}</span>
                <span class="dl-text">{lv.line.text}</span>
                {#if lv.commentable}
                <label for="{lv.anchorId}" class="dl-comment-icon" title="Comment on this line" aria-label="Comment on this line">
                    <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4 3h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-4 3v-3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"/></svg>
                </label>
                {/if}
            </div>
            {#if lv.commentable}
            <div class="dl-comment-form">
                <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/merge-requests/{mr.number}/comments">
                    <input type="hidden" name="filePath" value="{file.path}">
                    <input type="hidden" name="oldLine" value="{lv.line.oldLine}">
                    <input type="hidden" name="newLine" value="{lv.line.newLine}">
                    <textarea name="body" rows="3" placeholder="Comment on this line" required autocomplete="off"></textarea>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-sm">Comment</button>
                    </div>
                </form>
            </div>
            {/if}
        </div>
        {#for c in lv.comments}
        <div class="dl-comment-row">
            <div class="comment">
                <div class="comment-head">
                    <span class="who">{#avatar user=c.author /} {c.author.username}</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}/merge-requests/{mr.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}
        {/for}
    </div>
</div>
{/for}
{/if}
</section>
</div>
{/include}