{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Issue #{{ i.number }} {{ i.title }} · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "issues") %}{% endblock %}

{% block content %}

<div class="head"><h1>{{ i.title }} <small class="px kind-issue">issue #{{ i.number }}</small>

  <small><span class="tag{% if i.state == "closed" %} bad{% else %} head{% endif %}">{{ i.state }}{% if !i.reason.is_empty() %}: {{ i.reason.replace("_", " ") }}{% endif %}</span> {{ i.author }} opened this <time title="{{ i.created_ms|when_i }}">{{ i.created_ms|ago_i }}</time> · {{ comments.len()|plural("comment", "comments") }}{% if i.locked %} · <span class="tag">locked</span>{% endif %}</small>

</h1></div>

{% if !closed_by.is_empty() %}<p class="chain" aria-label="The chain of work"><span class="chain-link kind-issue st-{{ i.state }}"><span class="chain-kind">issue #{{ i.number }}</span> <span class="chain-state">{{ i.state }}</span></span>

<span class="chain-arrow">←</span> closed by {% for c in closed_by %}<a class="chain-link kind-proposal st-{{ c.state }}" href="{{ c.url }}" title="{{ c.title }}"><span class="chain-kind">proposal #{{ c.number }}</span> {{ c.title }} <span class="chain-state">{{ c.state }}</span></a>{% if !loop.last %} <span class="chain-and">·</span> {% endif %}{% endfor %}</p>{% endif %}

{% if let Some(n) = notice %}<p class="note">{{ n }}</p>{% endif %}

{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}

<div class="side-layout">

<div>

  <div class="comment"><span class="who">{{ i.author }}</span> <time class="mute" title="{{ i.created_ms|when_i }}">{{ i.created_ms|ago_i }}</time>

    {% if can_edit %}<details class="inline-edit"><summary class="small">edit</summary><form method="post" action="{{ repo.url }}/issue/{{ i.number }}/edit"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="text" name="title" value="{{ i.title }}"><textarea name="body" rows="6">{{ i.body }}</textarea><button type="submit">SAVE</button></form></details>{% endif %}

    <div class="body">{% if i.body.is_empty() %}<p class="mute">No description.</p>{% else %}{{ body_html|safe }}{% endif %}</div></div>

  <div data-live="{{ self.live_topic() }} {{ repo.live_topic() }}" data-fragment="timeline">

  {% for item in timeline %}

    {% match item %}

    {% when crate::web::issues::Item::Comment with (c, html) %}

    <div class="comment" id="c{{ c.id }}"><span class="who">{{ c.author }}</span> <time class="mute" title="{{ c.created_ms|when_i }}">{{ c.created_ms|ago_i }}</time>{% if c.edited_ms.is_some() %} <span class="mute small">edited</span>{% endif %}

      {% if let Some(u) = shell.user %}{% if *u == c.author || can_triage %}<form class="tiny" method="post" action="{{ repo.url }}/issue/{{ i.number }}/comment/{{ c.id }}/delete"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button>delete</button></form>{% endif %}{% endif %}

      <div class="body">{{ html|safe }}</div></div>

    {% when crate::web::issues::Item::Event with (e) %}

    <p class="small mute timeline">{{ e.actor }} {{ e.event }}{% if e.event.ends_with("by change") && !e.detail.is_empty() %}{% let hash = e.detail.split(' ').next().unwrap_or("") %} <a href="{{ repo.url }}/change/{{ hash }}"><code>{{ hash }}</code></a>{{ e.detail[hash.len()..] }}{% else if !e.detail.is_empty() %} {{ e.detail }}{% endif %} · <time title="{{ e.at_ms|when_i }}">{{ e.at_ms|ago_i }}</time></p>

    {% endmatch %}

  {% endfor %}

  </div>

  {% if shell.user.is_some() && (!i.locked || can_triage) %}

  <form class="card comment-form" method="post" action="{{ repo.url }}/issue/{{ i.number }}/comment">

    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

    <label for="body">Comment (Markdown)</label><textarea id="body" name="body" class="md" rows="5" required></textarea>

    <div class="choice">

      <button type="submit">COMMENT</button>

      {% if i.state == "open" %}<button type="submit" name="close" value="completed">COMMENT AND CLOSE</button>{% else %}<button type="submit" name="reopen" value="1">COMMENT AND REOPEN</button>{% endif %}

    </div>

  </form>

  {% else if i.locked %}<p class="empty">This issue is locked.</p>{% endif %}

</div>

<aside class="side side-sections">

  {% if shell.user.is_some() %}

  <section class="side-sec">

    <div class="side-head"><h3>Notifications</h3></div>

    <form method="post" action="{{ repo.url }}/issue/{{ i.number }}/subscribe"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button type="submit" class="small side-wide">{% if subscribed %}Unsubscribe{% else %}Subscribe{% endif %}</button></form>

    <p class="side-note">{% if subscribed %}You're receiving notifications because you're subscribed.{% else %}You're not receiving notifications from this issue.{% endif %}</p>

  </section>

  {% endif %}

  <section class="side-sec">

    <div class="side-head"><h3>Assignees</h3>

    {% if can_triage %}<details class="menu"><summary class="gear" title="Edit assignees" aria-label="Edit assignees">{% include "gear.html" %}</summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/assign"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="action" value="set">

        <p class="menu-title">Assign people to this issue</p>

        <input class="menu-filter" type="search" placeholder="Filter people" aria-label="Filter people" data-menu-filter>

        <div class="menu-list">{% for u in assignable %}<label class="menu-item"><input type="checkbox" name="username" value="{{ u }}"{% if assignees.contains(u) %} checked{% endif %}> <img class="avatar xs" src="/avatar/{{ u }}" alt="" loading="lazy"> <span class="menu-name">{{ u }}</span></label>{% endfor %}

        {% if assignable.is_empty() %}<p class="menu-empty">Nobody with access to this repository yet.</p>{% endif %}</div>

        <div class="menu-foot"><button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if assignees.is_empty() %}<p class="side-empty">No one{% if can_triage %}{% if let Some(me) = shell.user %}: <form class="inline" method="post" action="{{ repo.url }}/issue/{{ i.number }}/assign"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="username" value="{{ me }}"><button name="action" value="add" class="linkish">assign yourself</button></form>{% endif %}{% endif %}</p>

    {% else %}<ul class="side-people">{% for a in assignees %}<li><a href="/{{ a }}"><img class="avatar xs" src="/avatar/{{ a }}" alt="" loading="lazy"> {{ a }}</a></li>{% endfor %}</ul>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Labels</h3>

    {% if can_triage %}<details class="menu"><summary class="gear" title="Edit labels" aria-label="Edit labels">{% include "gear.html" %}</summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/labels"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        <p class="menu-title">Apply labels to this issue</p>

        {% if !all_labels.is_empty() %}<input class="menu-filter" type="search" placeholder="Filter labels" aria-label="Filter labels" data-menu-filter>{% endif %}

        <div class="menu-list">{% for l in all_labels %}<label class="menu-item"><input type="checkbox" name="label" value="{{ l.id }}"{% if labels.contains(l) %} checked{% endif %}> <span class="swatch" style="--c: {{ l.colour }}"></span> <span class="menu-name">{{ l.name }}{% if !l.description.is_empty() %}<small>{{ l.description }}</small>{% endif %}</span></label>{% endfor %}

        {% if all_labels.is_empty() %}<p class="menu-empty">This repository has no labels yet.</p>{% endif %}</div>

        <div class="menu-foot"><a class="small" href="{{ repo.url }}/labels">Edit labels</a> <button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if labels.is_empty() %}<p class="side-empty">None yet</p>{% else %}<p class="side-labels">{% for l in labels %}<span class="label" style="--c: {{ l.colour }}" title="{{ l.description }}">{{ l.name }}</span> {% endfor %}</p>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Milestone</h3>

    {% if can_triage && !milestones.is_empty() %}<details class="menu"><summary class="gear" title="Set milestone" aria-label="Set milestone">{% include "gear.html" %}</summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/milestone"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        <p class="menu-title">Set milestone</p>

        <div class="menu-list"><label class="menu-item"><input type="radio" name="milestone" value=""{% if milestone.is_none() %} checked{% endif %}> <span class="menu-name">No milestone</span></label>

        {% for (ms, sel) in milestones %}<label class="menu-item"><input type="radio" name="milestone" value="{{ ms.id }}"{% if *sel %} checked{% endif %}> <span class="menu-name">{{ ms.title }}</span></label>{% endfor %}</div>

        <div class="menu-foot"><button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if let Some(ms) = milestone %}<p class="side-value"><a href="{{ repo.url }}/milestones">{{ ms.title }}</a></p>{% else %}<p class="side-empty">No milestone</p>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Projects</h3>

    {% if let Some(choices) = project_choices %}{% if !choices.is_empty() %}<details class="menu"><summary class="gear" title="Add to a project" aria-label="Add to a project">{% include "gear.html" %}</summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/project"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="action" value="add">

        <p class="menu-title">Add to a project</p>

        {% if choices.len() > 6 %}<input class="menu-filter" type="search" placeholder="Filter projects" aria-label="Filter projects" data-menu-filter>{% endif %}

        <div class="menu-list">{% for pr in choices %}<button type="submit" name="project" value="{{ pr.number }}" class="menu-item menu-pick"><span class="menu-name">{{ pr.title }}<small>{{ pr.owner }}</small></span></button>{% endfor %}</div>

      </form></details>{% endif %}{% endif %}</div>

    {% if projects.is_empty() %}<p class="side-empty">None yet</p>{% else %}<ul class="plain small side-list">{% for (pr, col) in projects %}<li><a href="/projects/{{ pr.owner }}/{{ pr.number }}">{{ pr.title }}</a> <span class="mute">· {{ col }}</span>{% if project_choices.is_some() %}<form class="inline" method="post" action="{{ repo.url }}/issue/{{ i.number }}/project"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="project" value="{{ pr.number }}"><button name="action" value="remove" class="linkish" title="Take it off this project">remove</button></form>{% endif %}</li>{% endfor %}</ul>{% endif %}

    {% if let Some(choices) = project_choices %}{% if choices.is_empty() && projects.is_empty() %}<p class="side-note"><a href="/projects/{{ repo.owner }}">{{ repo.owner }}'s projects</a></p>{% endif %}{% endif %}

  </section>

  {% if can_triage %}

  <section class="side-sec side-actions">

    <form method="post" action="{{ repo.url }}/issue/{{ i.number }}/state"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

    {% if i.state == "open" %}<button type="submit" name="action" value="close" class="side-action"><span aria-hidden="true">✓</span> Close as completed</button>

    <button type="submit" name="action" value="not_planned" class="side-action"><span aria-hidden="true">⊘</span> Close as not planned</button>{% else %}<button type="submit" name="action" value="reopen" class="side-action"><span aria-hidden="true">↺</span> Reopen issue</button>{% endif %}

    <button type="submit" name="action" value="{% if i.locked %}unlock{% else %}lock{% endif %}" class="side-action"><span aria-hidden="true">🔒</span> {% if i.locked %}Unlock conversation{% else %}Lock conversation{% endif %}</button>

    <button type="submit" name="action" value="{% if i.pinned %}unpin{% else %}pin{% endif %}" class="side-action"><span aria-hidden="true">📌</span> {% if i.pinned %}Unpin issue{% else %}Pin issue{% endif %}</button>

    </form>

  </section>

  {% endif %}

</aside>

</div>

{% endblock %}