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

{% block title %}Video hochladen | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}profile-screen stitch-page{% endblock %}

{% block body %}
<header class="feed-shell-header">
    <nav class="feed-shell-topnav">
        <div class="feed-shell-topnav-left">
            <button type="button" class="feed-shell-location-btn" onclick="history.back()" aria-label="Zurueck">
                <span class="material-symbols-outlined">arrow_back</span>
            </button>
        </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">
            <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="feed-shell-user" aria-label="Profil">
                {% if app.user and app.user.avatarPath %}
                    <img src="{{ app.user.avatarPath }}" alt="Profil">
                {% else %}
                    <span class="material-symbols-outlined">person</span>
                {% endif %}
            </a>
        </div>
    </nav>
</header>

<main class="upload-main">
    {% for message in app.flashes('error') %}
        <div class="upload-flash upload-flash-error">{{ message }}</div>
    {% endfor %}
    {% for message in app.flashes('success') %}
        <div class="upload-flash upload-flash-success">{{ message }}</div>
    {% endfor %}

    <form method="post" enctype="multipart/form-data" class="upload-form" data-video-upload data-video-upload-advanced>
        {% if isCompanyUploader %}
            <section class="upload-company-notice glass-card" aria-live="polite">
                <span class="material-symbols-outlined" aria-hidden="true">business</span>
                <p>Das Video wird deinem Geschaeftskonto <strong>{{ companyAccount ? companyAccount.name : '' }}</strong> zugeordnet.</p>
            </section>
        {% else %}
            <section
                class="upload-provider-section"
                data-upload-provider-picker
                data-upload-provider-api="{{ path('api_companies_upload_search') }}"
            >
                <div class="upload-provider-selected glass-card" data-upload-provider-selected hidden>
                    <div class="upload-provider-selected-row">
                        <h2 class="upload-provider-heading">Dein <span>Anbieter</span></h2>
                        <button type="button" class="upload-provider-change-btn spring-btn" data-upload-provider-change>
                            Wechseln
                        </button>
                    </div>
                    <div class="upload-provider-selected-card">
                        <div class="upload-provider-selected-media" data-upload-selected-img></div>
                        <div class="upload-provider-selected-text">
                            <strong data-upload-selected-name></strong>
                            <p class="upload-provider-selected-meta" data-upload-selected-meta></p>
                            <span class="upload-provider-selected-dist" data-upload-selected-dist hidden></span>
                        </div>
                    </div>
                </div>

                <div class="upload-provider-panel" data-upload-provider-panel>
                    <h2 class="upload-provider-heading">Dienstleister <span>finden</span></h2>
                    <p class="upload-provider-lead muted">Waehle den Betrieb, dem dein Video zugeordnet werden soll. Optional: Standort fuer Sortierung nach Naehe.</p>

                    <div class="upload-provider-search-row">
                        <span class="upload-provider-search-icon material-symbols-outlined" aria-hidden="true">search</span>
                        <input
                            type="search"
                            class="upload-provider-search-input"
                            data-upload-provider-q
                            placeholder="Name, Ort, Adresse …"
                            autocomplete="off"
                        >
                        <button type="button" class="upload-provider-geo-btn spring-btn" data-upload-provider-geo title="Nach Entfernung sortieren">
                            <span class="material-symbols-outlined" aria-hidden="true">near_me</span>
                        </button>
                    </div>
                    <p class="upload-provider-geo-status muted" data-upload-provider-geo-status></p>

                    <div class="upload-provider-chips" data-upload-provider-chips role="group" aria-label="Kategorien">
                        <button type="button" class="upload-provider-chip is-active" data-upload-category="">Alle</button>
                        {% for cat in uploadCategories %}
                            <button type="button" class="upload-provider-chip" data-upload-category="{{ cat.slug }}">{{ cat.name }}</button>
                        {% endfor %}
                    </div>

                    <div class="upload-provider-results" data-upload-provider-results role="list"></div>
                    <p class="upload-provider-empty muted" data-upload-provider-hint hidden>Keine passenden Anbieter.</p>
                </div>

                <input type="hidden" name="company_id" value="" data-upload-company-input>
            </section>
        {% endif %}

        <section class="upload-hero">
            <h1>Upload Your <span>Service Intro</span></h1>

            <label class="upload-preview-zone spring-btn" data-upload-trigger>
                <input type="file" name="video_file" accept="video/mp4,video/*" required data-upload-input hidden>
                <img class="upload-preview-image" data-upload-preview-image src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdFAeW1H82pYTrOKehI6Let67MVfcLzdq3Ge7xjVamD8DAKPVO555IkYGRWR7BU1PJpyGZohTZ3GijfMEwndUOaIySLPiwH8lhnV3qEYrsxj3RZmEB4a7x4oCWFatyEdiv6woilGNoZ2qA-5l2eljfgKktTsNVBIo91w8ciZIshvi0kmNpsvG8jrS5UnsvEg--8do44Mlk1YBoUwKsOgX7WUk2nxLZFp5-15xk3lctNPiJG6O-o05BC4NGXMO6nkHN1Zgay7U0tqc" alt="Upload Vorschau">
                <video class="upload-preview-video" data-upload-preview-video playsinline muted loop hidden></video>
                <div class="upload-preview-overlay">
                    <div class="upload-add-icon glow-btn">
                        <span class="material-symbols-outlined">add_circle</span>
                    </div>
                    <p class="upload-preview-title">Select Video</p>
                    <p class="upload-preview-sub">Record a new intro or pick from your gallery</p>
                </div>
            </label>
        </section>

        <section class="upload-progress">
            <div class="upload-progress-head">
                <span>Uploading Video...</span>
                <strong data-upload-progress-label>0%</strong>
            </div>
            <div class="upload-progress-track">
                <div class="upload-progress-fill" data-upload-progress-fill></div>
            </div>
        </section>

        <section class="upload-fields">
            <label class="upload-field">
                <span>Video Title</span>
                <input type="text" name="title" required placeholder="e.g. Masterclass in Brand Design">
            </label>
            <label class="upload-field">
                <span>Brief Description</span>
                <textarea name="description" rows="4" placeholder="What can clients expect from your service?"></textarea>
            </label>
        </section>

        {% if not isCompanyUploader %}
            <section class="upload-provider-rating glass-card" data-upload-provider-rating aria-label="Anbieterbewertung optional">
                <p class="upload-provider-rating-label">Wie wuerdest du diesen Anbieter bewerten? <span class="muted">(Optional)</span></p>
                <div class="upload-provider-rating-stars" role="group">
                    {% for i in 1..5 %}
                        <button type="button" class="upload-rating-star" data-rating-star="{{ i }}" aria-label="{{ i }} von 5 Sternen" aria-pressed="false">
                            <span class="material-symbols-outlined" aria-hidden="true">star</span>
                        </button>
                    {% endfor %}
                </div>
                <input type="hidden" name="provider_rating" value="" data-upload-rating-input autocomplete="off">
            </section>
        {% endif %}

        <footer class="upload-footer">
            <button type="button" class="upload-btn upload-btn-cancel spring-btn" onclick="history.back()">Abbrechen</button>
            <button type="submit" class="upload-btn upload-btn-publish spring-btn shimmer-effect">Veroeffentlichen</button>
        </footer>
    </form>
</main>
{% endblock %}