{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/gists.css">
<link rel="stylesheet" href="/static/css/post.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/monokai.min.css">
{% endblock %}
{% block content %}
<div class="gist-detail-page">
    <a href="/gists" class="back-link">&larr; Back to Gists</a>

    <article class="gist-detail">
        <div class="gist-detail-header">
            <h1 class="gist-detail-title">{{ gist['title'] }}</h1>
            <span class="gist-language-badge">&#x1F4DD; {{ language_name(gist['language']) }}</span>
        </div>

        <div class="gist-detail-author">
            {% set _size = 32 %}{% set _size_class = "sm" %}{% set _user = author %}{% include "_avatar_link.html" %}
            <div>
                <a href="/profile/{{ author['username'] if author else '#' }}">{{ author['username'] if author else 'Unknown' }}</a>
                {% if author and author.get('role') %}
                <span style="font-size: 0.75rem; color: var(--text-muted);">&middot; {{ author['role'] }}</span>
                {% endif %}
                <span style="font-size: 0.75rem; color: var(--text-muted); margin-left: 0.5rem;">&middot; {{ time_ago }}</span>
            </div>
        </div>

        {% if gist.get('description') %}
        <div class="gist-detail-desc rendered-content" data-render>{{ gist['description'] }}</div>
        {% endif %}

        {% if attachments %}
        {% include "_attachment_display.html" %}
        {% endif %}

        <div class="gist-code-block">
            <div class="gist-code-header">
                <span class="gist-language-name">{{ language_name(gist['language']) }}</span>
                <button type="button" class="gist-copy-btn" data-copy="gist-code-content">Copy</button>
            </div>
            <pre><code id="gist-code-content" class="language-{{ gist['language'] }}">{{ gist['source_code'] }}</code></pre>
        </div>

        <div class="gist-detail-actions">
            {% if user %}
            <form method="POST" action="/votes/gist/{{ gist['uid'] }}" style="display:inline;">
                <input type="hidden" name="value" value="1">
                <button type="submit" class="gist-star-btn">&#x2606; {{ star_count }}</button>
            </form>
            {% endif %}
            {% if is_owner %}
            <button class="gist-star-btn" data-modal="edit-gist-modal"><span class="icon">&#x270F;&#xFE0F;</span>Edit</button>
            <form method="POST" action="/gists/delete/{{ gist['slug'] or gist['uid'] }}" style="display:inline;">
                <button type="submit" class="gist-star-btn" data-confirm="Delete this gist?"><span class="icon">&#x1F5D1;&#xFE0F;</span>Delete</button>
            </form>
            {% endif %}
        </div>
    </article>

    {% if is_owner %}
    <div class="modal-overlay" id="edit-gist-modal">
        <div class="card modal-card modal-card-wide">
            <div class="modal-header">
                <h3>Edit Gist</h3>
                <button type="button" class="modal-close btn-ghost btn-icon modal-close-btn">&times;</button>
            </div>
            <form method="POST" action="/gists/edit/{{ gist['slug'] or gist['uid'] }}">
                <div class="auth-field auth-field-gap">
                    <label for="edit-gist-title">Title</label>
                    <input type="text" id="edit-gist-title" name="title" required maxlength="200" value="{{ gist['title'] }}">
                </div>
                <div class="auth-field auth-field-gap">
                    <label for="edit-gist-description">Description (optional)</label>
                    <textarea id="edit-gist-description" name="description" maxlength="5000" class="min-h-80" data-mention>{{ gist.get('description', '') }}</textarea>
                </div>
                <div class="auth-field auth-field-gap">
                    <label for="edit-gist-language">Language</label>
                    <select id="edit-gist-language" name="language">
                        {% for code, name in languages %}
                        <option value="{{ code }}" {% if code == gist['language'] %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="auth-field auth-field-gap-last">
                    <label for="edit-gist-source-editor">Source Code</label>
                    <textarea id="edit-gist-source-editor" name="source_code" class="hidden-textarea" data-language="{{ gist['language'] }}">{{ gist['source_code'] }}</textarea>
                </div>
                {% include "_attachment_form.html" %}
                <div class="modal-footer">
                    <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary"><span class="icon">&#x1F4BE;</span>Save Changes</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% with target_uid=gist['uid'], target_type="gist" %}
    {% include "_comment_section.html" %}
    {% endwith %}
</div>
{% endblock %}

{% block extra_js %}
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/python/python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/javascript/javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/clike/clike.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/htmlmixed/htmlmixed.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/xml/xml.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/css/css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/go/go.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/rust/rust.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/sql/sql.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/shell/shell.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/yaml/yaml.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/markdown/markdown.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/swift/swift.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/php/php.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/ruby/ruby.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/kotlin/kotlin.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/haskell/haskell.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/lua/lua.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/perl/perl.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/r/r.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/dart/dart.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/scala/scala.min.js"></script>
<script type="module" src="/static/js/GistEditor.js"></script>
<script type="module">
const editModal = document.getElementById("edit-gist-modal");
if (editModal) {
    const editGistEditor = new window.GistEditor("edit-gist-source-editor", "edit-gist-language");
    const observer = new MutationObserver(() => {
        if (editModal.classList.contains("visible")) {
            editGistEditor.refresh();
        }
    });
    observer.observe(editModal, { attributes: true, attributeFilter: ["class"] });
}
</script>
{% endblock %}