{% extends 'events/management/base.html' %}


{% block title %}
    {% trans %}Payments{% endtrans %}
{% endblock %}


{% block description %}
    {% trans -%}
        Event-wide payment settings
    {%- endtrans %}
{% endblock %}

{% block content %}
    <div class="action-box">
        <div class="section">
            <div class="icon icon-settings"></div>
            <div class="text">
                <div class="label">
                    {% trans %}General Settings{% endtrans %}
                </div>
                {% trans %}Configure general settings for payments.{% endtrans %}
            </div>
            <div class="toolbar">
                <button class="i-button icon-edit"
                        data-href="{{ url_for('.event_settings_edit', event) }}"
                        data-title="{% trans %}Edit payment settings{% endtrans %}"
                        data-ajax-dialog>
                    {% trans %}Configure{% endtrans %}
                </button>
            </div>
        </div>
    </div>

    <h3>
        {% trans %}Payment methods{% endtrans %}
    </h3>

    <div class="i-badges-list i-payments-list">
        <a class="i-badge i-badge-disabled i-payment-enabled"
           title="{% trans %}Method only available for managers from the management area. Can't be disabled.{% endtrans %}">
            <div class="i-badge-content">
                <span class="i-badge-img icon-coins"></span>
                <span class="i-badge-title">
                    {% trans %}Manual{% endtrans %}
                </span>
            </div>
            <div class="i-badge-legend">
                <span class="i-badge-legend-right i-payment-status-enabled">
                    {% trans %}enabled{% endtrans %}
                </span>
            </div>
        </a>
        {%- for short_name, method in methods|sort(attribute='1.title') %}
            {% set payment_enabled = method in enabled_methods %}
            <a href="#" id="plugin-{{ method.name }}"
               class="js-edit-method i-badge {%- if payment_enabled %} i-payment-enabled {% else %} i-payment-disabled {% endif -%}"
               data-title="{% trans method=method.title %}Payment settings: {{ method }}{% endtrans %}"
               data-href="{{ url_for('.event_plugin_edit', event, method=short_name) }}"
               data-ajax-dialog>
                <div class="i-badge-content">
                    <span class="i-badge-img">
                        <img src="{{ method.logo_url }}">
                    </span>
                    <span class="i-badge-title">
                        {{ method.title }}
                    </span>
                </div>
                <div class="i-badge-legend">
                    {% if payment_enabled %}
                        <span class="i-badge-legend-right i-payment-status-enabled">{% trans %}enabled{% endtrans %}</span>
                    {% else %}
                        <span class="i-badge-legend-right i-payment-status-disabled">{% trans %}disabled{% endtrans %}</span>
                    {% endif %}
                </div>
            </a>
        {%- endfor %}
    </div>

    <script>
        (function() {
            'use strict';

            $('.js-edit-method').on('ajaxDialog:closed', function (evt, data) {
                if (!data) {
                    return;
                }
                var plugin = $('#plugin-' + data.plugin);
                plugin.toggleClass('i-payment-enabled', data.enabled);
                plugin.toggleClass('i-payment-disabled', !data.enabled);
            });
        })();
    </script>
{% endblock %}
