{% extends "base.html.j2" %}

{% block title %}Phantom Site Export - neopig{% endblock %}

{% block extra_css %}
h1 { color: #ff6b6b; margin-bottom: 10px; }
.subtitle { color: #888; margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: #aaa; }
select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
}
.info {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}
.info h3 { color: #ff6b6b; margin-top: 0; }
.info ul { color: #aaa; line-height: 1.8; }
{% endblock %}

{% block content %}
<div class="container">
    {% include 'partials/search_box.html.j2' %}
    <h1>Phantom Site Export</h1>
    <p class="subtitle">{{ t.phantom_subtitle }}</p>

    <form action="/phantom/export" method="get">
        <div class="form-group">
            <label>{{ t.select_domain }}</label>
            <select name="domain">
                <option value="">{{ t.all_domains }}</option>
                {% for domain, count in domains %}
                {% if domain %}
                <option value="{{ domain }}">{{ domain }} ({{ count }} pages)</option>
                {% endif %}
                {% endfor %}
            </select>
        </div>
        <button type="submit">{{ t.download_phantom }} (.zip)</button>
    </form>

    <div class="info">
        <h3>{{ t.what_is_phantom }}</h3>
        <ul>
            <li>{{ t.phantom_feature_1 }}</li>
            <li>{{ t.phantom_feature_2 }}</li>
            <li>{{ t.phantom_feature_3 }}</li>
            <li>{{ t.phantom_feature_4 }}</li>
            <li>{{ t.phantom_feature_5 }}</li>
        </ul>
    </div>
</div>
{% endblock %}
