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

{% block title %}{{ company.name }} | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}company-screen stitch-page{% endblock %}

{% block body %}
    {% set heroVideo = companyVideos|first ?: communityVideos|first %}

    <section class="stitch-company-hero">
        <div class="stitch-company-cover kinetic-video">
            {% if company.heroImagePath %}
                <img src="{{ company.heroImagePath }}" alt="{{ company.name }}">
            {% elseif heroVideo and heroVideo.thumbnailUrl %}
                <img src="{{ heroVideo.thumbnailUrl }}" alt="{{ company.name }}">
            {% else %}
                <div class="stitch-company-cover-fallback"></div>
            {% endif %}
        </div>
        <button class="stitch-icon-btn" type="button" onclick="history.back()" aria-label="Zurueck">
            <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
        </button>
        {% if isOwner %}
            <form method="post" enctype="multipart/form-data" class="stitch-cover-upload">
                <label class="stitch-icon-btn" aria-label="Header-Bild aendern">
                    <i class="fa-solid fa-camera"></i>
                    <input type="file" name="hero_image" accept="image/*" hidden onchange="this.form.submit()">
                </label>
            </form>
        {% endif %}
    </section>

    <section class="stitch-company-profile animate-entry-1 in-view">
        <div class="stitch-company-avatar">
            {% if company.heroImagePath %}
                <img src="{{ company.heroImagePath }}" alt="{{ company.name }}">
            {% else %}
                {{ company.name|slice(0, 1)|upper }}
            {% endif %}
        </div>
        <h1>{{ company.name }}</h1>
        <p>
            {% if company.category is not null %}
                {{ company.category.name }}
            {% else %}
                Unternehmen
            {% endif %}
            · {{ company.city }}
        </p>

        <div class="stitch-company-stats">
            <div><strong>{{ companyVideos|length + communityVideos|length }}</strong><span>Videos</span></div>
            <div>
                <strong>{% if providerRatingAggregate %}{{ providerRatingAggregate.avg|number_format(1, ',', '') }}{% else %}—{% endif %}</strong>
                <span>Bewertung{% if providerRatingAggregate %} ({{ providerRatingAggregate.count }}){% endif %}</span>
            </div>
            <div><strong>{{ likesCount }}</strong><span>Likes</span></div>
        </div>

        <div class="stitch-company-actions">
            <button type="button" class="profile-hero-btn primary">Termin buchen</button>
            <button type="button" class="profile-hero-btn ghost">Nachricht</button>
        </div>
    </section>

    {% if profileIntroVideo is defined and profileIntroVideo %}
        <section class="stitch-content-section animate-entry-2 in-view">
            <h2>Profilvideo</h2>
            {% if profileIntroVideo.moderationStatus == 'approved' and profileIntroVideo.playbackUrl %}
                <div class="stitch-tile" style="max-width: 100%;">
                    <video src="{{ profileIntroVideo.playbackUrl }}" {% if profileIntroVideo.thumbnailUrl %}poster="{{ profileIntroVideo.thumbnailUrl }}"{% endif %} controls playsinline preload="metadata"></video>
                    <span>{{ profileIntroVideo.title }}</span>
                </div>
            {% elseif profileIntroVideo.moderationStatus == 'pending' %}
                <p class="muted" style="padding: 1.5rem; border: 1px solid rgba(255,144,100,0.35); border-radius: 12px;">Profilvideo wird geprueft. Dein Profil ist weiterhin sichtbar.</p>
            {% endif %}
        </section>
    {% endif %}

    <section class="stitch-content-section animate-entry-2 in-view">
        <h2>Unsere Clips</h2>
        <div class="stitch-grid">
            {% for video in companyVideos %}
                <article class="stitch-tile">
                    {% if video.playbackUrl %}
                        <video src="{{ video.playbackUrl }}" {% if video.thumbnailUrl %}poster="{{ video.thumbnailUrl }}"{% endif %} muted playsinline loop></video>
                    {% elseif video.thumbnailUrl %}
                        <img src="{{ video.thumbnailUrl }}" alt="{{ video.title }}">
                    {% endif %}
                    <span>{{ video.title }}</span>
                </article>
            {% else %}
                <p class="muted">Noch keine Clips vom Unternehmen.</p>
            {% endfor %}
        </div>
    </section>

    <section class="stitch-content-section animate-entry-3 in-view">
        <h2>User uploaded Videos</h2>
        <div class="stitch-grid">
            {% for video in communityVideos %}
                <article class="stitch-tile">
                    {% if video.playbackUrl %}
                        <video src="{{ video.playbackUrl }}" {% if video.thumbnailUrl %}poster="{{ video.thumbnailUrl }}"{% endif %} muted playsinline loop></video>
                    {% elseif video.thumbnailUrl %}
                        <img src="{{ video.thumbnailUrl }}" alt="{{ video.title }}">
                    {% endif %}
                    <span>{{ video.title }}{% if video.providerRating %} <span class="stitch-tile-rating" title="Kundenbewertung">★{{ video.providerRating }}</span>{% endif %}</span>
                </article>
            {% else %}
                <p class="muted">Noch keine Community-Clips.</p>
            {% endfor %}
        </div>
    </section>
{% endblock %}