{% extends "base.html" %}

{% block title %}Words to Readlang - How to Use{% endblock %}

{% block content %}
<div class="info" style="max-width: 700px; margin: 2rem auto;">
    <h2 style="margin-top: 0; margin-bottom: 1.5rem;">How to Use</h2>

    <div style="display: flex; flex-direction: column; gap: 2rem;">

        <div>
            <h3 style="margin-top: 0;">What is this tool?</h3>
            <p>
                Words to Readlang converts vocabulary exports from language learning apps into
                the CSV format that <a href="https://readlang.com" target="_blank" rel="noopener" style="color: #509aca;">Readlang</a>
                accepts for word import. Currently supported sources are
                <strong>Pod101</strong> (FinnishPod101, SpanishPod101, etc.) and
                <strong>Language Reactor</strong> (Netflix/YouTube vocabulary).
            </p>
        </div>

        <div>
            <h3 style="margin-top: 0;">Getting started</h3>
            <ol style="padding-left: 1.5rem; line-height: 1.8;">
                <li>Export your vocabulary from your learning app.</li>
                <li>Click <strong>Upload Vocabulary File</strong> on the home page.</li>
                <li>Choose your file, select the source language and format, then upload.</li>
                <li>Review the preview, fix any invalid entries, then export to Readlang.</li>
            </ol>
        </div>

        <div>
            <h3 style="margin-top: 0;">Search</h3>
            <p>
                Use the <strong>Search Words</strong> button in the navigation bar to find a
                word across all your uploads. If the same word appears in multiple uploads
                with different translations, you'll see an amber "Translations differ" warning.
                You can delete the entry from any individual upload you don't want it in,
                then export each file separately.
            </p>
        </div>

        <div>
            <h3 style="margin-top: 0;">Sessions</h3>
            <p>
                Your uploads are tied to a <strong>session</strong>, identified by a
                memorable four-word magic phrase (e.g. <code>silver-forest-apple-jump</code>).
                The phrase is set the first time you upload a file and stored in a cookie.
            </p>
            <p>
                Write down your phrase! If you clear your browser cookies or visit from a
                different device, you can re-enter the phrase on the home page to recover
                access to all your uploads. Sessions are kept for one year from last use.
            </p>
        </div>

        <div>
            <h3 style="margin-top: 0;">Validation</h3>
            <p>
                Readlang requires that the example sentence contains the exact vocabulary word.
                After upload, each entry is checked:
            </p>
            <ul style="padding-left: 1.5rem; line-height: 1.8;">
                <li><strong>Valid</strong> — example exists and contains the word.</li>
                <li><strong>No Example</strong> — no example sentence was found in the source file.</li>
                <li><strong>Word Missing</strong> — an example exists but does not contain the word.</li>
            </ul>
            <p>
                Use <strong>Fetch Missing Examples</strong> on the preview page to automatically
                search <a href="https://tatoeba.org" target="_blank" rel="noopener" style="color: #509aca;">Tatoeba</a>
                and the <a href="https://wortschatz.uni-leipzig.de" target="_blank" rel="noopener" style="color: #509aca;">Leipzig Corpora Collection</a>
                for suitable sentences. You can also edit any entry inline.
                Entries that are still invalid at export time are excluded automatically.
            </p>
        </div>

        <div>
            <h3 style="margin-top: 0;">Export</h3>
            <p>
                Click <strong>Export to Readlang</strong> on the preview page. The tool
                generates one or more CSV files, each containing at most 200 valid entries.
                If an upload has more than 200 valid entries the files are named
                <code>output (part 1).csv</code>, <code>output (part 2).csv</code>, etc.
                Upload them one by one to Readlang's word import page.
            </p>
        </div>

    </div>
</div>
{% endblock %}