{% extends "base.html" %}

{% block title %}Words to Readlang - Search Words{% endblock %}

{% block content %}
<div style="max-width: 900px; margin: 0 auto;">
    <h2 style="margin-bottom: 1.5rem;">Search Words</h2>

    <form method="GET" action="{{ url_for('search.search_page') }}" style="background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 2rem;">
        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end;">
            <div class="form-group" style="flex: 3; min-width: 300px; margin-bottom: 0;">
                <label for="q">Search</label>
                <input type="text" id="q" name="q" value="{{ query }}" placeholder="Search for a word..." autofocus style="width: 100%;">
            </div>

            {% if available_pairs|length > 1 %}
            <div class="form-group" style="margin-bottom: 0;">
                <label for="source">Source language</label>
                <select id="source" name="source">
                    <option value="">All</option>
                    {% for pair in available_pairs %}
                    <option value="{{ pair.source_language }}" {% if source_language == pair.source_language and target_language == pair.target_language %}selected{% endif %}>
                        {{ pair.source_language|language_name }} → {{ pair.target_language|language_name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <button type="submit" class="btn btn-primary" style="margin-bottom: 0;">Search</button>
        </div>
    </form>

    {% if results is none %}
    <div style="text-align: center; color: #6b7280; padding: 3rem 0;">
        <p>Search across all your uploads. If the same word appears in multiple uploads with different translations, you'll see a warning.</p>
    </div>

    {% elif results|length == 0 %}
    <p style="color: #6b7280;">No words matching <strong>{{ query }}</strong> found.</p>

    {% else %}
    <p style="color: #6b7280; margin-bottom: 1.5rem;">{{ results|length }} word group{{ 's' if results|length != 1 else '' }} found for <strong>{{ query }}</strong>.</p>

    {% for group in results %}
    <div class="search-result-group" style="background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; overflow: hidden;">
        <div style="padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 0.75rem;">
            <h3 style="margin: 0; font-size: 1.125rem;">{{ group.word }}</h3>
            {% if group.translations_differ %}
            <span style="background: #fffbeb; color: #92400e; border: 1px solid #f59e0b; border-radius: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600;">
                Translations differ
            </span>
            {% endif %}
        </div>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
                <thead>
                    <tr style="border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
                        <th style="text-align: left; padding: 0.625rem 1rem; color: #374151; font-weight: 600;">Upload</th>
                        <th style="text-align: left; padding: 0.625rem 1rem; color: #374151; font-weight: 600;">Translation</th>
                        <th style="text-align: left; padding: 0.625rem 1rem; color: #374151; font-weight: 600;">Status</th>
                        <th style="text-align: left; padding: 0.625rem 1rem; color: #374151; font-weight: 600;">Example</th>
                        <th style="padding: 0.625rem 1rem;"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in group.entries %}
                    <tr id="search-entry-{{ entry.id }}" style="border-bottom: 1px solid #f3f4f6;">
                        <td style="padding: 0.625rem 1rem; color: #6b7280; white-space: nowrap;">
                            <a href="{{ url_for('preview.preview_upload', upload_id=entry.upload_id) }}" style="color: #509aca; text-decoration: none;">{{ entry.upload.filename }}</a>
                        </td>
                        <td style="padding: 0.625rem 1rem;">{{ entry.current_translation }}</td>
                        <td style="padding: 0.625rem 1rem;">
                            {% include 'components/validation_badge.html' %}
                        </td>
                        <td style="padding: 0.625rem 1rem; color: #4b5563; max-width: 300px;">
                            {{ entry.current_example[:80] ~ '…' if entry.current_example and entry.current_example|length > 80 else (entry.current_example or '—') }}
                        </td>
                        <td style="padding: 0.625rem 1rem; text-align: right; white-space: nowrap;">
                            <button hx-delete="{{ url_for('edit.delete_entry', entry_id=entry.id) }}"
                                    hx-target="#search-entry-{{ entry.id }}"
                                    hx-swap="outerHTML"
                                    hx-confirm="Remove this entry from '{{ entry.upload.filename }}'?"
                                    class="btn btn-sm btn-danger">
                                Delete
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}
    {% endif %}
</div>
{% endblock %}