{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/gists.css">
<link rel="stylesheet" href="/static/css/sidebar.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="gists-layout">
    <aside class="sidebar-card">
        <div class="sidebar-heading">Languages</div>
        <div class="sidebar-nav">
            <a href="/gists" class="sidebar-link {% if not current_language %}active{% endif %}">
                <span class="icon">&#x1F4CB;</span>All
            </a>
            {% for code, name in languages %}
            {% if code != 'plaintext' %}
            <a href="/gists?language={{ code }}" class="sidebar-link {% if current_language == code %}active{% endif %}">
                <span class="icon">&#x1F4DD;</span>{{ name }}
            </a>
            {% endif %}
            {% endfor %}
            <a href="/gists?language=plaintext" class="sidebar-link {% if current_language == 'plaintext' %}active{% endif %}">
                <span class="icon">&#x1F4DD;</span>Plain Text
            </a>
        </div>

        {% if user %}
        <div class="sidebar-section">
            <div class="sidebar-heading">My Gists</div>
            <a href="/gists?user_uid={{ user['uid'] }}" class="btn btn-secondary btn-sm full-width justify-center">
                <span class="icon">&#x1F464;</span>View My Gists
            </a>
        </div>
        {% endif %}
    </aside>

    <div class="gists-main">
        <div class="gists-header">
            <div>
                <h1>Gists</h1>
                <span class="subtitle">Share and discover code snippets</span>
            </div>
            <div class="gists-count">{{ total_count }} gist{{ 's' if total_count != 1 else '' }}</div>
        </div>

        <div class="gists-grid">
            {% for item in gists %}
            <div class="gist-card fade-in" data-href="/gists/{{ item.gist['slug'] or item.gist['uid'] }}">
                <div class="gist-card-header">
                    <h3 class="gist-card-title">{{ item.gist['title'] }}</h3>
                    <form method="POST" action="/votes/gist/{{ item.gist['uid'] }}" class="inline-form" data-stop-propagation>
                        <input type="hidden" name="value" value="1">
                        <button type="submit" class="gist-card-star">&#x2606; {{ item.gist.get('stars', 0) }}</button>
                    </form>
                </div>

                <div class="gist-card-meta">
                    <span class="gist-language-badge">&#x1F4DD; {{ language_name(item.gist['language']) }}</span>
                </div>

                {% if item.gist.get('description') %}
                <div class="gist-card-desc">{{ item.gist['description'][:200] }}{% if item.gist['description']|length > 200 %}...{% endif %}</div>
                {% endif %}

                <div class="gist-card-footer">
                    <div class="gist-author">
                        {% set _size = 20 %}{% set _size_class = "sm" %}{% set _user = item.author %}{% include "_avatar_link.html" %}
                        <span>{{ item.author['username'] if item.author else 'Unknown' }}</span>
                    </div>
                    <span>{{ item.time_ago }}</span>
                </div>
            </div>
            {% else %}
            <div class="empty-state empty-state-full">No gists found. Create one!</div>
            {% endfor %}
        </div>
    </div>
</div>

{% if user %}
<button class="feed-fab" id="create-gist-btn" title="Create Gist" data-modal="create-gist-modal">+</button>

<div class="modal-overlay" id="create-gist-modal">
    <div class="card modal-card modal-card-wide">
        <div class="modal-header">
            <h3>Create Gist</h3>
            <button type="button" class="modal-close btn-ghost btn-icon modal-close-btn">&times;</button>
        </div>

        <form method="POST" action="/gists/create">
            <div class="auth-field auth-field-gap">
                <label for="gist-title">Title</label>
                <input type="text" id="gist-title" name="title" required maxlength="200" placeholder="Gist title">
            </div>

            <div class="auth-field auth-field-gap">
                <label for="gist-description">Description (optional)</label>
                <textarea id="gist-description" name="description" maxlength="5000" placeholder="What does this snippet do?" class="min-h-80" data-mention></textarea>
            </div>

            <div class="auth-field auth-field-gap">
                <label for="gist-language">Language</label>
                <select id="gist-language" name="language">
                    {% for code, name in languages %}
                    <option value="{{ code }}">{{ name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="auth-field auth-field-gap-last">
                <label for="gist-source-editor">Source Code</label>
                <textarea id="gist-source-editor" name="source_code" class="hidden-textarea" data-language="plaintext"></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">Create Gist</button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% 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/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 gistEditor = new window.GistEditor();
const gistModal = document.getElementById("create-gist-modal");
if (gistModal) {
    const observer = new MutationObserver(() => {
        if (gistModal.classList.contains("visible")) {
            gistEditor.init();
            gistEditor.refresh();
        }
    });
    observer.observe(gistModal, { attributes: true, attributeFilter: ["class"] });
}
</script>
{% endblock %}