{% if app.user %}
<div data-controller="import-modal import-help">
<nav class="navbar">
    <div class="navbar-left">
        <a href="{{ path('app_homepage') }}" class="navbar-brand"><span class="brand-prefix">Ltbxd</span>Actorle</a>
    </div>
    <div class="navbar-right">
        {# Gitea repo #}
        <a href="https://git.lclr.dev/thibaud-lclr/ltbxd-actorle" class="navbar-icon" target="_blank" rel="noopener noreferrer" title="Code source">
            <svg width="20" height="20" viewBox="0 0 92 92" fill="currentColor">
                <path d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
            </svg>
        </a>

        {# User menu #}
        <div class="navbar-item" data-controller="dropdown import-status">
            <button class="navbar-icon" data-action="click->dropdown#toggle" data-dropdown-target="trigger">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </button>
            <div class="dropdown-menu" data-dropdown-target="menu" hidden>
                <div class="import-status-item" data-import-status-target="item">
                    <div class="dropdown-item-row">
                        <button class="dropdown-item" data-action="click->import-modal#open" data-import-status-target="importBtn">
                            Importer ses films
                        </button>
                        <button class="info-btn" data-action="click->import-help#open" title="Comment exporter depuis Letterboxd">
                            i
                        </button>
                    </div>
                </div>
                <a href="{{ path('app_logout') }}" class="dropdown-item">Se déconnecter</a>
            </div>
        </div>
    </div>
</nav>

{# Import Modal #}
<div class="modal-overlay" data-import-modal-target="overlay" hidden>
    <div class="modal">
        <div class="modal-header">
            <h2>Importer ses films</h2>
            <button class="modal-close" data-action="click->import-modal#close">&times;</button>
        </div>
        <div class="modal-body">
            <p>Importez votre fichier <code>watched.csv</code> exporté depuis Letterboxd.</p>
            <input type="file" accept=".csv" data-import-modal-target="fileInput">
            <div data-import-modal-target="feedback" class="modal-feedback" hidden></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-action="click->import-modal#submit" data-import-modal-target="submitBtn">
                Importer
            </button>
        </div>
    </div>
</div>
{# Help Modal #}
<div class="modal-overlay" data-import-help-target="overlay" data-action="click->import-help#closeOnBackdrop" hidden>
    <div class="modal">
        <div class="modal-header">
            <h2>Comment exporter ses films</h2>
            <button class="modal-close" data-action="click->import-help#close">&times;</button>
        </div>
        <div class="modal-body">
            <ol class="help-steps">
                <li>Connectez-vous à votre compte <a href="https://letterboxd.com" target="_blank" rel="noopener noreferrer">Letterboxd</a></li>
                <li>Allez dans <strong>Settings</strong> (Paramètres)</li>
                <li>Cliquez sur l'onglet <strong>Import &amp; Export</strong></li>
                <li>Cliquez sur <strong>Export Your Data</strong></li>
                <li>Un fichier ZIP sera téléchargé. Décompressez-le.</li>
                <li>Utilisez le fichier <code>watched.csv</code> pour l'import.</li>
            </ol>
        </div>
    </div>
</div>
</div>
{% else %}
<nav class="navbar">
    <div class="navbar-left">
        <a href="{{ path('app_homepage') }}" class="navbar-brand"><span class="brand-prefix">Ltbxd</span>Actorle</a>
    </div>
    <div class="navbar-right">
        <a href="https://git.lclr.dev/thibaud-lclr/ltbxd-actorle" class="navbar-icon" target="_blank" rel="noopener noreferrer" title="Code source">
            <svg width="20" height="20" viewBox="0 0 92 92" fill="currentColor">
                <path d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
            </svg>
        </a>
        <a href="{{ path('app_login') }}" class="btn btn-primary">Se connecter</a>
    </div>
</nav>
{% endif %}