{% extends "orga/settings/base.html" %}
{% load bootstrap4 %}
{% load compress %}
{% load i18n %}
{% load rules %}
{% load static %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{% static "vendored/colorpicker/css/bootstrap-colorpicker.min.css" %}"/>
{% endblock %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "vendored/moment-with-locales.js" %}"></script>
        <script defer src="{% static "vendored/moment-timezone-with-data-2012-2022.js" %}"></script>
        <script defer src="{% static "vendored/datetimepicker/bootstrap-datetimepicker.js" %}"></script>
        <script defer src="{% static "orga/js/datetimepicker.js" %}"></script>
        <script defer src="{% static "vendored/colorpicker/js/bootstrap-colorpicker.min.js" %}"></script>
        <script defer src="{% static "orga/js/colorpicker.js" %}"></script>
    {% endcompress %}
{% endblock %}

{% block settings_content %}
    <h2>{% translate "Settings" %}</h2>
    <div class="flex-container"><div class="flex-content">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset>
                <legend id="general">
                    {% translate "General information" %}
                </legend>
                {% bootstrap_form_errors form %}
                {% bootstrap_form_errors sform %}

                {% bootstrap_field form.name layout='event' %}
                {% bootstrap_field form.slug layout='event' addon_before=url_placeholder addon_before_class="input-group-prepend input-group-text" %}
                {% bootstrap_field form.date_from layout='event' %}
                {% bootstrap_field form.date_to layout='event' %}
                {% bootstrap_field form.email layout='event' %}
                {% bootstrap_field sform.custom_domain layout='event' %}
                {% bootstrap_field form.timezone layout='event' %}
                {% bootstrap_field form.locale layout='event' %}
                {% bootstrap_field form.locales layout='event' %}
                {% bootstrap_field sform.show_schedule layout='event' %}
                {% bootstrap_field sform.show_featured layout='event' %}
                {% bootstrap_field form.featured_sessions_text layout='event' %}
                {% bootstrap_field sform.schedule_display layout='event' %}
                {% bootstrap_field sform.export_html_on_schedule_release layout='event' %}
                {% bootstrap_field sform.html_export_url layout='event' %}
                {% bootstrap_field sform.meta_noindex layout='event' %}

            </fieldset>
            <fieldset>
                <legend id="display">
                    {% translate "Display settings" %}
                </legend>
                {% bootstrap_field form.landing_page_text layout='event' %}
                {% bootstrap_field sform.imprint_url layout='event' %}
                {% bootstrap_field form.primary_color layout='event' addon_before="<i></i>" addon_before_class="colorpicker-input-addon color-readable" %}
                <div id="csswrap">
                    {% bootstrap_field form.custom_css layout='event' %}
                    <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#collapseCSSBox" aria-expanded="false" aria-controls="collapseCSSBox">
                        <i class="fa fa-code"></i>
                    </button>
                </div>
                <div class="collapse" id="collapseCSSBox">
                    {% bootstrap_field form.custom_css_text layout='event' %}
                </div>
                <div class="event-logo-field form-group row">
                    <label class="col-md-3 col-form-label" for="id_logo">{% translate "Event logo" %}<br><span class="optional">Optional</span></label>
                    <div class="event-logo-form-fields col-md-9">
                        {% if request.event.logo %}
                            <img class="event-logo-display"
                                src="{{ request.event.logo.url }}"
                                alt="{% translate "The event's logo" %}"
                            />
                        {% endif %}
                        <br>
                        {% bootstrap_field form.logo layout="inline" %}
                    </div>
                </div>
                <div class="event-logo-field form-group row">
                    <label class="col-md-3 col-form-label" for="id_custom_css">{% translate "Event header image" %}<br><span class="optional">Optional</span></label>
                    <div class="event-logo-form-fields col-md-9">
                        {% if request.event.header_image %}
                            <img class="event-logo-display"
                                src="{{ request.event.header_image.url }}"
                                alt="{% translate "The event's header_image" %}"
                            />
                        {% endif %}
                        <br>
                        {% bootstrap_field form.header_image layout="inline" %}
                    </div>
                </div>
                <div {% if request.event.primary_color %}style="--color: {{ request.event.primary_color }}"{% endif %} class="colorpicker-update">
                    {% bootstrap_field sform.display_header_pattern layout='event' %}
                </div>
                <fieldset>
                    <div class="submit-group panel">
                        <span>
                            {% has_perm "person.is_administrator" request.user request.event as can_delete_event %}
                            {% if can_delete_event %}
                                <a class="btn btn-outline-danger btn-lg" href="{{ request.event.orga_urls.delete }}">
                                    {% translate "Delete event" %}
                                </a>
                            {% endif %}
                        </span>
                        <span>
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fa fa-check"></i>
                                {% translate "Save" %}
                            </button>
                        </span>
                    </div>
                </form>
            </div></div>
{% endblock %}
