{% extends 'base.html.twig' %}

{% block title %}Feed | Wanted{% endblock %}
{% block site_footer %}{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}feed-content stitch-page{% endblock %}

{% block body %}
<header class="feed-shell-header">
    <nav class="feed-shell-topnav">
        <div class="feed-shell-topnav-left">
            <form action="{{ path('app_feed') }}" method="get" class="feed-shell-city-form" data-feed-city-form>
                {% set cityParams = app.request.query.all|merge({'city': selectedCity ?: 'all'}) %}
                {% if cityParams.category is defined %}
                    <input type="hidden" name="category" value="{{ cityParams.category }}">
                {% endif %}

                <input type="hidden" name="city" value="{{ selectedCity ?: 'all' }}" data-feed-city-input>
                <div class="feed-shell-city-picker" data-feed-city-picker>
                    <button type="button" class="feed-shell-city-pill feed-shell-city-trigger" data-feed-city-trigger aria-haspopup="listbox" aria-expanded="false">
                        <span class="material-symbols-outlined" aria-hidden="true">location_on</span>
                        {% set feedPlaceLabel = locationMode == 'live' ? (selectedLocationName ?: 'Dein Standort') : (selectedCity ?: 'Deutschland') %}
                        <span data-feed-city-label>{% if locationMode == 'live' and selectedRadius is not null %}{{ feedPlaceLabel }} ({{ selectedRadius|round(0, 'floor') }} km){% else %}{{ feedPlaceLabel }}{% endif %}</span>
                        <span class="material-symbols-outlined feed-shell-city-chevron" aria-hidden="true">expand_more</span>
                    </button>
                    <div class="feed-shell-city-menu" data-feed-city-menu hidden role="listbox" aria-label="Stadt ausw&#228;hlen">
                        <button type="button" class="feed-shell-city-option {% if selectedCity is empty %}is-selected{% endif %}" data-feed-city-option data-city-value="all">Deutschland</button>
                        {% for cityName in majorCities %}
                            <button type="button" class="feed-shell-city-option {% if selectedCity == cityName %}is-selected{% endif %}" data-feed-city-option data-city-value="{{ cityName }}">{{ cityName }}</button>
                        {% endfor %}
                    </div>
                </div>
            </form>
        </div>

        <a class="feed-shell-logo-wrap feed-shell-logo-center" href="{{ path('app_feed') }}" aria-label="Zum Feed">
            <img src="{{ asset('assets/img/top_logo.png') }}" alt="Wanted Logo">
        </a>

        <div class="feed-shell-topnav-right">
            <button type="button" class="feed-shell-location-btn" data-location-open data-location-request="1" aria-label="Standort Einstellungen">
                <span class="material-symbols-outlined">location_on</span>
            </button>
            <button type="button" class="feed-shell-filter-toggle" data-feed-filter-toggle aria-label="Filterleiste ein- oder ausblenden">
                <span class="material-symbols-outlined" data-feed-filter-toggle-icon>tune</span>
            </button>
        </div>
    </nav>

    <div class="feed-shell-filterbar" data-feed-filterbar>
        <div class="feed-shell-tabs hide-scrollbar" data-feed-filter-tabs>
            <a href="{{ path('app_feed', feedNavQuery|merge({'category': ''})) }}" class="feed-shell-tab {% if selectedCategory is empty %}is-active{% endif %}">Alle</a>
            {% for cat in categories %}
                <a href="{{ path('app_feed', feedNavQuery|merge({'category': cat.slug})) }}" class="feed-shell-tab {% if selectedCategory == cat.slug %}is-active{% endif %}">{{ cat.name }}</a>
            {% endfor %}
        </div>
    </div>
</header>

<main
    class="video-snap-container"
    data-feed-page-url="{{ path('api_feed_page') }}"
    data-feed-next-offset="{{ feedNextOffset }}"
    data-feed-query="{{ feedPaginationQuery|json_encode|e('html_attr') }}"
    {% if not feedHasMore %}data-feed-exhausted="1"{% endif %}
>
    {% if feedItems is not empty %}
        {% include 'feed/_feed_items.html.twig' %}
    {% else %}
        <section class="video-section stack-item" data-stack-item>
            <div class="stack-meta">
                <h2>Keine Videos gefunden</h2>
                <p>Bitte passe deine Filter an.</p>
            </div>
        </section>
    {% endif %}
    {% if feedHasMore %}
        <div class="feed-load-sentinel" data-feed-load-sentinel aria-hidden="true"></div>
    {% endif %}
</main>

<nav class="mobile-bottom-nav" aria-label="Hauptnavigation">
    <a href="{{ path('app_feed') }}" class="is-active" aria-label="Home"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">home_app_logo</span></a>
    <a href="{{ path('app_how_it_works') }}" aria-label="So funktioniert JI:O"><span class="material-symbols-outlined">explore</span></a>
    <a href="{{ path('app_video_upload') }}" aria-label="Erstellen"><span class="material-symbols-outlined">add_circle</span></a>
    <a href="{% if app.user %}{{ path('app_profile_show', {id: app.user.id}) }}{% else %}{{ path('app_register') }}{% endif %}" aria-label="Profil" {% if not app.user %}data-auth-required data-auth-action="Profile ansehen"{% endif %}><span class="material-symbols-outlined">person</span></a>
</nav>

{% if not app.user %}
<div class="auth-gate-modal" data-auth-gate-modal hidden>
    <button type="button" class="auth-gate-backdrop" data-auth-gate-close aria-label="Hinweis schliessen"></button>
    <aside class="auth-gate-sheet" role="dialog" aria-modal="true" aria-label="Registrierung erforderlich">
        <h3>Nur mit Account verfuegbar</h3>
        <p><span data-auth-gate-action>Diese Aktion</span> ist nur fuer registrierte Nutzer verfuegbar.</p>
        <div class="auth-gate-actions">
            <a href="{{ path('app_register') }}" class="auth-gate-primary">Jetzt registrieren</a>
            <a href="{{ path('app_login') }}" class="auth-gate-secondary">Ich habe schon ein Konto</a>
        </div>
    </aside>
</div>
{% endif %}

<div class="feed-location-modal" data-location-modal hidden>
    <button class="feed-location-backdrop" type="button" data-location-close aria-label="Standort Einstellungen schliessen"></button>
    <aside class="feed-location-sheet" role="dialog" aria-modal="true" aria-label="Location Settings">
        <div class="feed-location-handle"></div>
        <header class="feed-location-sheet-header">
            <h2>Location Settings</h2>
            <button type="button" class="feed-location-close" data-location-close aria-label="Schliessen">
                <span class="material-symbols-outlined">close</span>
            </button>
        </header>
        <form method="get" action="{{ path('app_feed') }}" class="feed-location-form" data-location-form>
            <input type="hidden" name="category" value="{{ selectedCategory ?: '' }}">
            <input type="hidden" name="lat" value="{{ selectedLat is not null ? selectedLat : '' }}" data-location-lat>
            <input type="hidden" name="lng" value="{{ selectedLng is not null ? selectedLng : '' }}" data-location-lng>
            <input type="hidden" name="locationName" value="{{ selectedLocationName ?: '' }}" data-location-name>
            <input type="hidden" name="geoTried" value="1">

            <section class="feed-location-current-display" aria-live="polite">
                <span class="feed-location-current-icon material-symbols-outlined">my_location</span>
                <div class="feed-location-current-copy">
                    <p>Aktueller Standort</p>
                    <strong data-location-current-label>{{ selectedLocationName ?: (locationMode == 'live' ? 'Dein Standort' : 'Nicht aktiv') }}</strong>
                </div>
            </section>

            <section class="feed-location-radius" data-location-radius-section {% if locationMode != 'live' %}hidden{% endif %}>
                <div class="feed-location-radius-head">
                    <div>
                        <h3>Search Radius</h3>
                        <p>Find curators within this range</p>
                    </div>
                    <div class="feed-location-radius-value"><strong data-location-radius-value>{{ selectedRadius|default(5)|round(0, 'floor') }}</strong><span>KM</span></div>
                </div>
                <input
                    type="range"
                    name="radius"
                    min="5"
                    max="50"
                    step="1"
                    value="{{ selectedRadius|default(5)|round(0, 'floor') }}"
                    data-location-radius
                    {% if locationMode != 'live' %}disabled{% endif %}
                >
                <div class="feed-location-radius-scale"><span>5 KM</span><span>50 KM</span></div>
            </section>

            <section class="feed-location-city">
                <label for="location-city-select">Gro&#223;stadt</label>
                <select id="location-city-select" name="city">
                    <option value="all" {% if selectedCity is empty %}selected{% endif %}>Alle St&#228;dte</option>
                    {% for cityName in majorCities %}
                        <option value="{{ cityName }}" {% if selectedCity == cityName %}selected{% endif %}>{{ cityName }}</option>
                    {% endfor %}
                </select>
            </section>

            <section class="feed-location-recent">
                <p>Recent Searches</p>
                <div>
                    <span class="material-symbols-outlined">map</span>
                    <div>
                        <strong>{{ selectedCity ?: 'Deutschland' }}</strong>
                        <span>Germany</span>
                    </div>
                </div>
            </section>

            <button type="submit" class="feed-location-apply">APPLY CHANGES</button>
        </form>
    </aside>
</div>

<div class="comments-overlay" data-comments-overlay hidden data-comments-logged-in="{{ app.user ? '1' : '0' }}">
    <button class="comments-backdrop" type="button" data-comments-close aria-label="Kommentare schliessen"></button>
    <aside class="comments-panel" role="dialog" aria-modal="true" aria-label="Kommentare">
        <header class="comments-header">
            <button class="comments-nav-btn" type="button" data-comments-close aria-label="Zurueck">
                <span class="material-symbols-outlined">arrow_back</span>
            </button>
            <h3>Discussion</h3>
            <button class="comments-close-btn" type="button" data-comments-close aria-label="Schliessen">
                <span class="material-symbols-outlined">more_vert</span>
            </button>
        </header>

        <section class="comments-context">
            <div class="comments-context-media">
                <img data-comments-topic-image src="" alt="Diskussionsvideo">
                <div class="comments-context-overlay"></div>
                <div class="comments-context-copy">
                    <span class="comments-topic-chip">Featured Topic</span>
                    <h4 data-comments-topic-title>Video Diskussion</h4>
                </div>
            </div>
            <p class="comments-context-meta"><span class="comments-context-meta-inner"><strong data-comments-topic-count>0</strong> Beitr&#228;ge in dieser Diskussion</span></p>
            <p class="muted" data-comments-subtitle hidden>Video Diskussion</p>
        </section>

        <div class="comments-list" data-comments-list></div>
        <p class="comments-reply-hint muted" data-comments-reply-hint hidden></p>
        <form class="comments-form" data-comments-form>
            <div class="comments-form-avatar">
                {% if currentUser and currentUser.avatarPath %}
                    <img src="{{ currentUser.avatarPath }}" alt="Du">
                {% else %}
                    <span>{{ currentUser and currentUser.displayName ? currentUser.displayName|slice(0,1)|upper : '?' }}</span>
                {% endif %}
            </div>
            <div class="comments-form-input-wrap">
                <input type="text" name="comment" placeholder="Kommentar schreiben..." maxlength="2000" autocomplete="off" data-comments-input>
                <button type="submit" aria-label="Senden" {% if not app.user %}data-auth-required data-auth-action="Kommentar schreiben"{% endif %}>
                    <span class="material-symbols-outlined">send</span>
                </button>
            </div>
        </form>
    </aside>
</div>
{% endblock %}