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

{% block body %}
    <h2>
        <a href="{{ path('campaign-edit', {campaignId: campaignEntity.id, source: 'show'}) }}">
            <i class="fas fa-edit" title="{% trans %}label_edit{% endtrans %}"></i>
        </a>
        {{ campaignEntity.name }}
        {% if campaignEntity.dynBanner %}
            <i class="fas fa-bookmark" title="{% trans %}label_dynamic_banner{% endtrans %}"></i>
        {% endif %}
    </h2>
    <br>
    {% if advertisingList|length > 0 %}
        {# desktop version >= 768px #}
        {% include 'campaign/responsive/show/desktop.html.twig' %}
        {# mobile version < 768px #}
        {% include 'campaign/responsive/show/mobile.html.twig' %}
        {# ---------------------------------------------------------------------------------------------------------- #}
        {# checkbox fallback #}
        {# ---------------------------------------------------------------------------------------------------------- #}
        <div class="row">
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="fallback">
                    <label class="form-check-label" for="fallback">{% trans %}label_fallback{% endtrans %}</label>
                </div>
            </div>
        </div>
        {# ---------------------------------------------------------------------------------------------------------- #}
        {# create zip #}
        {# ---------------------------------------------------------------------------------------------------------- #}
        <div class="row">
            <div class="col-12">
                <div class="input-group">
                    <input type="text" class="form-control form-control-sm" id="zip-name"
                           value="{{ campaignEntity.name }}.zip">
                    <button class="btn btn-sm btn-secondary w-250-px" type="button"
                            style="border-radius: 0 .25rem 0.25rem 0"
                            onclick="createZip({{ campaignEntity.id }})">{% trans %}button_create_zip{% endtrans %}</button>
                </div>
                <span id="create-zip-validate-message-filename"
                      style="visibility: hidden; display: block">{% trans %}error_create_zip_filename{% endtrans %}</span>
            </div>
        </div>
    {% endif %}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# upload #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    <div class="row">
        <div class="col-12">
            <form method="post" enctype="multipart/form-data">
                <div class="input-group">
                    <input type="file" class="form-control form-control-sm" id="advertising-file-input"
                           data-buttonText="" multiple>
                    <a class="btn btn-sm btn-secondary w-250-px" type="submit" style="border-radius: 0 .25rem 0.25rem 0"
                       onclick="fileUploadForAdvertising('{{ campaignEntity.id }}')">{% trans %}button_upload_ad{% endtrans %}
                    </a>
                </div>
                <span id="file-upload-validate-message"
                      style="visibility: hidden">{% trans %}error_upload_file{% endtrans %}</span>
            </form>
        </div>
    </div>
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# show json #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {% if campaignEntity.dynBanner %}
        {# {% if campaignEntity.json|length > 0 %}
            {% set jsonValue = campaignEntity.json %}
        {% else %}
            {% set jsonValue = campaignEntity.name %}
        {% endif %}
        <div class="row">
            <div class="col-12">
                <div class="input-group">
                    <input type="text" class="form-control" id="json-file-name" value="{{ jsonValue|lower }}.json"
                           readonly>
                    <button class="btn btn-outline-secondary" type="button" id="show-json-button"
                            data-toggle="collapse" data-target="#json-data"
                            aria-expanded="false" aria-controls="json-data">JSON anzeigen
                    </button>
                </div>
                <p style="visibility: hidden" id="textdata-url">{{ jsonValue|lower }}.json</p>
            </div>
        </div>
        <div class="collapse" id="json-data">
            <div class="row">
                <div class="col-12" id="textdata-loaded">
                    <script src="{{ asset('js/dynamicTextloader_v1_kundencenter.js') }}"></script>
                </div>
            </div>
        </div> #}
        {% if jsonPropertyArray|length > 1 %} <!-- if json properties exist enable json button -->
            {% set disabled = "" %}
        {% else %} <!-- otherwise disable -->
            {% set disabled = "disabled" %}
        {% endif %}
        <div class="row">
            <div class="col-12">
                <div class="input-group">
                    <input type="text" class="form-control form-control-sm" id="json-file-name"
                           value="{{ campaignEntity.json }}{% trans %}label_json_ending{% endtrans %}"
                           readonly>
                    <button class="btn btn-sm btn-secondary w-250-px" type="button"
                            style="border-radius: 0 .25rem 0.25rem 0"
                            data-toggle="collapse" data-target="#json-data"
                            aria-expanded="false"
                            aria-controls="json-data" {{ disabled }}>{% trans %}label_show_json{% endtrans %}
                    </button>
                </div>
                <p style="visibility: hidden"
                   id="textdata-url">{{ campaignEntity.json|lower }}{% trans %}label_json_ending{% endtrans %}</p>
            </div>
        </div>
        <div class="collapse" id="json-data">
            {% if jsonPropertyArray is not empty %}
                {% if jsonPropertyArray.uid == 1 or jsonPropertyArray.uid == 2 %}
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-striped table-sm">
                                <thead>
                                <tr>
                                    <th>{% trans %}label_json_key{% endtrans %}</th>
                                    <th>{% trans %}label_json_value{% endtrans %}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if jsonPropertyArray.uid == 1 %} <!-- uid 1 -->
                                    {% for key, value in jsonPropertyArray %}
                                        <tr>
                                            <td>{{ key }}</td>
                                            {% if key == 'dynimage' %}
                                                <td><img src="{{ value|raw }}" style="width: 50%; height:auto;" alt=""/>
                                                </td>
                                            {% else %}
                                                <td>{{ value|raw }}</td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                {% else %} <!-- uid 2 -->
                                    {% for property in jsonPropertyArray %}
                                        {% if property.value is defined %}
                                            <tr>
                                                <td>{{ property.label }}</td>
                                                <td>{{ property.value|raw }}</td>
                                            </tr>
                                        {% endif %}
                                        {% if property.styles is defined %}
                                            <tr>
                                                <td>{{ property.label }}</td>
                                                <td>
                                                    <div style="{{ property.styles }}; padding:20px; width: 20px;"></div>
                                                    <br>
                                                    {{ property.styles }}
                                                </td>
                                            </tr>
                                        {% endif %}
                                        {% if property.image is defined %}
                                            <tr>
                                                <td>{{ property.label }}</td>
                                                <td>
                                                    <div style="{{ property.styles }}; padding:20px; width: 20px;"></div>
                                                    <br>
                                                    <img src="{{ property.image }}" alt=""/>
                                                </td>
                                            </tr>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% else %}
                    <div class="row">
                        <div class="col-12" id="textdata-loaded">
                            <script src="{{ asset('js/dynamicTextloader_v1_kundencenter.js') }}"></script>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# buttons #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    <div class="row">
        <div class="col-lg-2 col-md-3">
            <a class="btn btn-sm btn-back w-100"
               href="{{ path('campaign-list') }}">{% trans %}button_back{% endtrans %}</a>
        </div>
    </div>
{% endblock %}