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

{% block body %}
    <h2>
        <span style="color: {{ status }};" title="{{ advertisingEntity.status }}">
            <i class="fas fa-circle"></i>
        </span>
        {{ advertisingEntity.file }}
    </h2>
    <br>
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# buttons #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    <div class="row">
        <div class="col-lg-2 col-md-3 mb-3">
            <a class="btn btn-sm btn-secondary w-100" id="acceptance"
               href="{{ path('advertising-accept', {campaignId: campaignId, advertisingId: advertisingEntity.id}) }}">
                {{ button }}
            </a>
        </div>
        {% if adjacentAdvertisingIds.next < 0 and adjacentAdvertisingIds.previous > 0 %}
            <div class="col-lg-2 offset-lg-8 col-md-3 offset-md-6" style="text-align: right">
                <a class="btn btn-sm btn-secondary" style="padding: .4rem .5rem 0.1rem .5rem"
                   href="{{ path('advertising-show', {campaignId: campaignId, advertisingId: adjacentAdvertisingIds.previous}) }}">
                    <i class="fa fa-caret-left fa-2x"></i>
                </a>
            </div>
        {% elseif adjacentAdvertisingIds.next > 0 and adjacentAdvertisingIds.previous < 0 %}
            <div class="col-lg-2 offset-lg-8 col-md-3 offset-md-6" style="text-align: right">
                <a class="btn btn-sm btn-secondary" style="padding: .4rem .5rem 0.1rem .5rem"
                   href="{{ path('advertising-show', {campaignId: campaignId, advertisingId: adjacentAdvertisingIds.next}) }}">
                    <i class="fa fa-caret-right fa-2x"></i>
                </a>
            </div>
        {% elseif adjacentAdvertisingIds.next > 0 and adjacentAdvertisingIds.previous > 0 %}
            <div class="col-lg-2 offset-lg-8 col-md-3 offset-md-6" style="text-align: right">
                <a class="btn btn-sm btn-secondary" style="padding: .4rem .5rem 0.1rem .5rem"
                   href="{{ path('advertising-show', {campaignId: campaignId, advertisingId: adjacentAdvertisingIds.previous}) }}">
                    <i class="fa fa-caret-left fa-2x"></i>
                </a>
                <a class="btn btn-sm btn-secondary" style="padding: .4rem .5rem 0.1rem .5rem"
                   href="{{ path('advertising-show', {campaignId: campaignId, advertisingId: adjacentAdvertisingIds.next}) }}">
                    <i class="fa fa-caret-right fa-2x"></i>
                </a>
            </div>
        {% endif %}
    </div>
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# textarea #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {% if advertisingEntity.status != 'abgenommen' %}
        <div class="row">
            <div class="col-12">
                <label for="advertising-comment"
                       class="form-label">{% trans %}label_comment{% endtrans %}</label>
                <textarea class="form-control" id="advertising-comment" name="" rows="5"></textarea>
            </div>
            <span id="ad-comment-validate-message"
                  style="visibility: hidden">{% trans %}error_comment_empty{% endtrans %}</span>
        </div>
    {% endif %}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# comment list #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {% if comments|length > 0 %}
        {# desktop version >= 768px #}
        {% include 'advertising/responsive/show/desktop.html.twig' %}
        {# mobile version < 768px #}
        {% include 'advertising/responsive/show/mobile.html.twig' %}
    {% endif %}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# buttons #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    <div class="row">
        <div class="col-lg-2 col-md-3 mb-3">
            <a class="btn btn-sm btn-back w-100" id="cancel"
               href="{{ path('campaign-show', {campaignId: campaignId}) }}">{% trans %}button_back{% endtrans %}</a>
        </div>
        <div class="col-lg-2 offset-lg-8 col-md-3 offset-md-6">
            <a class="btn btn-sm btn-primary w-100" id="save-advertising-comment"
               onclick="saveComment('{{ advertisingEntity.id }}')">{% trans %}button_save{% endtrans %}</a>
        </div>
    </div>
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# different types of advertising #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {% if 'image' in fileDataContainer.mime %}
        <div class="row">
            <div class="col-12">
                <img src="{{ asset('werbemittel/') ~ fileDataContainer.file }}" alt="" id="ad-image">
            </div>
        </div>
    {% elseif fileDataContainer.mime == 'application/x-shockwave-flash' %}
        <div class="row">
            <div class="col-12">
                <object data-classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        data-codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
                        width="{{ fileDataContainer.width }}"
                        height="{{ fileDataContainer.height }}">
                    <param name="movie" value="{{ asset('werbemittel/') ~ fileDataContainer.file }}">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <param name=allowScriptAccess value="always"/>
                    <embed src="{{ asset('werbemittel/') ~ fileDataContainer.file }}"
                           width="{{ fileDataContainer.width }}" height="{{ fileDataContainer.height }}"
                           wmode="transparent" quality="high"
                           pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
                           type="application/x-shockwave-flash">
                </object>
            </div>
        </div>
    {% elseif fileDataContainer.mime == 'video/mp4' %}
        <div class="row">
            <div class="col-12">
                <video width="{{ fileDataContainer.width }}px" height="{{ fileDataContainer.height }}px"
                       id="ad-video-mp4" class="video-js" controls data-setup="{}">
                    <source src="{{ asset('werbemittel/') ~ fileDataContainer.file }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    {% elseif fileDataContainer.mime == 'text/html' %}
        <div class="row">
            <div class="col-12">
                {% trans %}info_html_popup{% endtrans %}<br/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3">
                <button class="btn btn-sm btn-secondary w-100" onclick="openHtmlPopup({{ fileDataContainer|json_encode }})">
                    {% trans %}button_show_html_ad{% endtrans %}
                </button>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-12">
                {% trans %}info_file_download{% endtrans %}<br/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3">
                <a class="btn btn-sm btn-secondary w-100" href="{{ asset('werbemittel/') ~ fileDataContainer.file }}" download>
                    {% trans %}button_download{% endtrans %}
                </a>
            </div>
        </div>
    {% endif %}
{% endblock %}