{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/issues.css') }}">
{% endblock %}
{% block content %}
<div class="issues-layout issue-detail">
    <div class="issue-detail-nav">
        <a href="/issues" class="issue-back">&#x2190; All issues</a>
        {% if issue.html_url %}<a href="{{ issue.html_url }}" class="issue-gitea-link" target="_blank" rel="noopener noreferrer">View on Gitea</a>{% endif %}
    </div>

    <div class="card issue-detail-card">
        <div class="issue-detail-header">
            <span class="issue-number">#{{ issue.number }}</span>
            <h1 class="issue-detail-title">{{ issue.title }}</h1>
            <span class="issue-status {{ issue.state }}">{{ issue.state }}</span>
        </div>
        <div class="issue-meta">
            {% if issue.is_local_author %}
            {% set _user = {'username': issue.author_username} %}{% set _size = 24 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
            {% endif %}
            <span class="issue-author">{{ issue.author_username }}</span>
            <span class="issue-dot">&middot;</span>
            <span class="issue-date">{{ format_date(issue.created_at, true) }}</span>
        </div>

        {% if viewer_is_admin %}
        <div class="issue-admin-actions">
            {% if issue.state == 'open' %}
            <form method="POST" action="/issues/{{ issue.number }}/status">
                <input type="hidden" name="status" value="closed">
                <button type="submit" class="btn btn-secondary btn-sm"><span class="btn-spinner" aria-hidden="true"></span>Close ticket</button>
            </form>
            {% else %}
            <form method="POST" action="/issues/{{ issue.number }}/status">
                <input type="hidden" name="status" value="open">
                <button type="submit" class="btn btn-secondary btn-sm"><span class="btn-spinner" aria-hidden="true"></span>Reopen ticket</button>
            </form>
            {% endif %}
        </div>
        {% endif %}

        <div class="issue-detail-body rendered-content" data-render>{{ body }}</div>
    </div>

    <section class="comments-section">
        <h3>Updates &amp; comments</h3>
        {% for comment in comments %}
        <div class="issue-comment">
            <div class="issue-comment-head">
                {% if comment.is_local_author %}
                {% set _user = {'username': comment.author_username} %}{% set _size = 20 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                {% else %}
                <span class="issue-comment-badge">dev</span>
                {% endif %}
                <span class="issue-author">{{ comment.author_username }}</span>
                <span class="issue-dot">&middot;</span>
                <span class="issue-date">{{ format_date(comment.created_at, true) }}</span>
            </div>
            <div class="issue-comment-body rendered-content" data-render>{{ comment.body }}</div>
        </div>
        {% else %}
        <p class="no-comments-msg">No updates yet.</p>
        {% endfor %}

        {% if can_comment %}
        <form method="POST" action="/issues/{{ issue.number }}/comment" class="comment-form issue-comment-form">
            <textarea name="body" required maxlength="5000" placeholder="Add a comment (posted to the tracker)..." class="min-h-120"></textarea>
            <div class="issue-comment-form-footer">
                <button type="submit" class="btn btn-primary btn-sm"><span class="btn-spinner" aria-hidden="true"></span>Comment</button>
            </div>
        </form>
        {% else %}
        <p class="no-comments-msg"><a href="/auth/login">Log in</a> to comment.</p>
        {% endif %}
    </section>
</div>
{% endblock %}