{% extends "django_rakaia/base.html" %}

{% block title %}Translation Management{% endblock %}

{% block content %}
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script src="https://unpkg.com/htmx-ext-sse@2.2.2/dist/sse.js"></script>

<div class="container" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <header>
        <h1>Translation Management</h1>
    </header>

    <div class="dashboard-grid">
        <!-- Filters -->
        <section class="card">
            <h2>Filters</h2>
            <form id="filter-form"
                  hx-get="{% url 'django_rakaia:translations_table_htmx' %}"
                  hx-target="#translations-tbody"
                  hx-trigger="input changed delay:300ms from:find input, change from:find select, refresh-table from:body"
                  hx-include="this">
                <div class="filter-controls">
                    <div class="form-group">
                        <label for="langcode-filter">Language</label>
                        <select id="langcode-filter" name="langcode" class="form-control">
                            <option value="">All languages</option>
                            {% for lang in languages %}
                                <option value="{{ lang }}">{{ lang }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="msgid-filter">Search msgid</label>
                        <input id="msgid-filter" name="msgid" type="text"
                               class="form-control" placeholder="Search…" autocomplete="off">
                    </div>
                </div>
            </form>
        </section>

        <!-- Translations Table -->
        <section class="card">
            <h2>Translations</h2>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Message ID</th>
                            <th>Translation</th>
                            <th>Language</th>
                            <th>Domain</th>
                            <th>Context</th>
                        </tr>
                    </thead>
                    <tbody id="translations-tbody"
                           hx-get="{% url 'django_rakaia:translations_table_htmx' %}"
                           hx-trigger="load"
                           hx-include="#filter-form">
                        <tr><td colspan="5" class="loading">Loading translations…</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- Add Translation -->
        <section class="card">
            <h2>Add / update translation</h2>
            <form hx-post="{% url 'django_rakaia:translation_create_htmx' %}"
                  hx-target="#translations-tbody"
                  hx-swap="innerHTML"
                  hx-include="#filter-form"
                  hx-on::after-request="if (event.detail.successful) this.reset()">
                <div class="form-row">
                    <div class="form-group">
                        <label for="msgid-input">Message ID</label>
                        <input id="msgid-input" name="msgid" type="text" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="msgstr-input">Translation</label>
                        <input id="msgstr-input" name="msgstr" type="text" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="langcode-input">Language</label>
                        <select id="langcode-input" name="langcode" class="form-control" required>
                            {% for lang in languages %}
                                <option value="{{ lang }}">{{ lang }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </section>

        <!-- Live Activity Feed: pure HTMX SSE, zero JS -->
        <section class="card">
            <h2>Recent Activity</h2>
            <div id="activity-feed"
                 class="activity-list"
                 hx-ext="sse"
                 sse-connect="{% url 'django_rakaia:translation_activity_sse_html' %}"
                 sse-swap="activity"
                 hx-swap="afterbegin">
                {% for stream in recent_streams %}
                    <div class="activity-item">
                        <div class="activity-header">
                            <span class="activity-user">{{ stream.user }}</span>
                            <span class="activity-action">{{ stream.action }}</span>
                            <span class="activity-lang">[{{ stream.langcode }}]</span>
                        </div>
                        <div class="activity-content">
                            <strong>{{ stream.translatable.msgid }}</strong>
                            {% if stream.translatable.msgstr %}
                                → {{ stream.translatable.msgstr }}
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>
    </div>
</div>

<style>
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.card { background: var(--card-bg); border-radius: 8px; padding: 20px;
        border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card h2 { margin-bottom: 15px; color: var(--text-color); }

.filter-controls { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; align-items: end; }
.form-row { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: 15px; align-items: end; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: 500; color: var(--text-color); }
.form-control { padding: 8px 12px; border: 1px solid var(--border-color);
                border-radius: 4px; font-size: 14px; }
.form-control:focus { outline: none; border-color: var(--primary-color);
                      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }

.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
       font-size: 14px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: var(--primary-color); color: white; }
.btn-primary:hover { background: var(--primary-hover); }

.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px; text-align: left;
                                 border-bottom: 1px solid var(--border-color); }
.data-table th { background: var(--bg-color); font-weight: 600; color: var(--text-color); }
.data-table tr:hover { background: var(--bg-color); }

.loading, .no-results { text-align: center; padding: 40px; color: var(--text-muted); }

.activity-list { max-height: 400px; overflow-y: auto; }
.activity-item { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.activity-item:last-child { border-bottom: none; }
.activity-header { display: flex; gap: 10px; font-size: 12px;
                   color: var(--text-muted); margin-bottom: 5px; }
.activity-user { font-weight: 600; color: var(--primary-color); }
.activity-action { text-transform: capitalize; }
.activity-content { margin-bottom: 5px; }

@media (max-width: 768px) {
    .filter-controls, .form-row { grid-template-columns: 1fr; }
}
</style>
{% endblock %}