{% extends "base.html" %}

{% block title %}Words to Readlang - Select Language Pair{% endblock %}

{% block content %}
<div class="pool-container">
    <div class="preview-header">
        <h2>Select Language Pair</h2>
        <p>You have vocabulary for multiple language pairs. Choose one to view:</p>
    </div>

    <div style="display: grid; gap: 1rem; margin-top: 2rem;">
        {% for source_lang, target_lang in available_pairs %}
        <a href="{{ url_for('pool.pool', source=source_lang, target=target_lang) }}"
           class="upload-card"
           style="text-decoration: none; cursor: pointer; transition: transform 0.2s;"
           onmouseover="this.style.transform='translateY(-2px)'"
           onmouseout="this.style.transform='translateY(0)'">
            <div class="upload-header">
                <h3 style="margin: 0;">{{ source_lang|language_name }} → {{ target_lang|language_name }}</h3>
                <span class="badge" style="background-color: #6366f1;">{{ source_lang|language_name }} → {{ target_lang|language_name }}</span>
            </div>
            <div class="upload-details">
                <p>Click to view word pool for this language pair</p>
            </div>
        </a>
        {% endfor %}
    </div>

    <div class="preview-actions" style="margin-top: 2rem;">
        <a href="{{ url_for('main.index') }}" class="btn btn-secondary">
            Back to Home
        </a>
    </div>
</div>
{% endblock %}