{% extends "layout.html" %}
{% set active_id = "widgets" %}
{% from "_macros.html" import render_pagination, render_event_date, render_field, render_field_with_errors, render_event_organizer %}
{%- block title -%}
{{ _('Widgets') }}
{%- endblock -%}
{% block content %}

<h1 class="mb-3">{{ _('Widgets') }}</h1>
<div class="btn-group mb-3">
    <button type="button" id="toggle-settings-btn" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#settingsContainer" aria-expanded="false" aria-controls="settingsContainer"><i class="fa fa-cog"></i> {{ _('Settings') }}</button>
</div>

<div class="collapse pb-4" id="settingsContainer">
    <h2 class="mt-0">{{ _('Settings') }}</h2>
    <form action="" method="POST">
        {{ form.hidden_tag() }}

        {{ render_field_with_errors(form.widget_font) }}
        {{ render_field_with_errors(form.widget_background_color) }}
        {{ render_field_with_errors(form.widget_primary_color) }}
        {{ render_field_with_errors(form.widget_link_color) }}

        {{ render_field(form.submit) }}
    </form>
</div>

<h2>Veranstaltungen als Widget einbinden</h2>
<p>Auf deiner Webseite kannst du per Widget ganz einfach die Veranstaltungen deiner Organisation einbinden.</p>

<div class="modal fade" id="embedWidgetModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Installation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <nav>
                    <div class="nav nav-tabs" id="embedWidgetModalTab" role="tablist">
                      <a class="nav-item nav-link active" id="embedWidgetModalScriptTabLink" data-toggle="tab" href="#embedWidgetModalScriptTab" role="tab" aria-controls="embedWidgetModalScriptTab" aria-selected="true">Standard</a>
                      <a class="nav-item nav-link" id="embedWidgetModalIframeTabLink" data-toggle="tab" href="#embedWidgetModalIframeTab" role="tab" aria-controls="embedWidgetModalIframeTab" aria-selected="false">Alternative iFrame</a>
                    </div>
                  </nav>
                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active py-3" id="embedWidgetModalScriptTab" role="tabpanel" aria-labelledby="embedWidgetModalScriptTabLink">
                        <p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein.</p>
                        <p>Füge den folgenden Code im <code>&lt;head&gt;</code> der Seite ein.</p>
                        <textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="6"><!-- Event calendar widget -->
<script>(function(w,d,s,o,f,js,fjs){w['EventCallyWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}(window,document,'script','eventcally','{{ url_for('static', filename='widget-loader.js', _external=True) }}'));</script>
<!-- End event calendar widget --></textarea>
                        <p class="mt-3">Füge den folgenden Code an der Stelle im <code>&lt;body&gt;</code> der Seite ein, wo das Widget dargestellt werden soll.</p>
                        <textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="3"><div class="eventcally-widget" data-widget-short-name="{{ admin_unit.short_name }}" data-widget-width="100%" data-widget-height="400px" data-widget-resize="true" data-widget-google-tag-manager="false"></div></textarea>
                        <p class="mt-3">Mit den folgenden Attributen kann das Widget konfiguriert werden:</p>
                        <ul>
                            <li><var>data-widget-short-name</var>: Kurzname der Organisation</li>
                            <li><var>data-widget-width</var>: iFrame Breite (CSS)</li>
                            <li><var>data-widget-height</var>: iFrame Höhe (CSS)</li>
                            <li><var>data-widget-resize</var>: iFrame Größe automatisch anpassen</li>
                            <li><var>data-widget-google-tag-manager</var>: Events in window.dataLayer für Google Tag Manager schreiben.
                                <ul>
                                    <li>Event <var>eventcallyWidget.pageView</var> mit Parameter <var>url</var></li>
                                    <li>Event <var>eventcallyWidget.linkClick</var> mit Parameter <var>url</var></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade py-3" id="embedWidgetModalIframeTab" role="tabpanel" aria-labelledby="embedWidgetModalIframeTabLink">
                        <p>Alternativ zur Einbindung per Script kann das Widget direkt per iFrame eingebunden werden.</p>
                        <p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein. Füge den folgenden Code an der Stelle im <code>&lt;body&gt;</code> der Seite ein, wo das Widget dargestellt werden soll.</p>
                        <textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled><iframe src="{{ url_for('widget_event_dates', id=admin_unit.id, _external=True) }}"></iframe></textarea>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

<div class="btn-group mb-3">
    <button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#embedWidgetModal"><i class="fa fa-wrench"></i> Installation</button>
    <a class="btn btn-outline-info" href="{{ url_for('widget_event_dates', id=admin_unit.id) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a>
</div>

{% if admin_unit.suggestions_enabled %}
<h2>{{ _('Link, um Veranstaltungen vorzuschlagen') }}</h2>
<input class="form-control text-monospace" style="font-size: 0.7rem;" disabled value="{{ url_for('event_suggestion_create_for_admin_unit', id=admin_unit.id, _external=True) }}" />
<p><a class="btn btn-outline-info my-2" href="{{ url_for('event_suggestion_create_for_admin_unit', id=admin_unit.id, _external=True) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a></p>
{% endif %}


{% endblock %}