{% extends "wagtailadmin/base.html" %}

{% load i18n static %}

{% block titletag %}{% trans "Payment & shipping method mapping" %}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "oscar/js/select2/select2.min.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/css/select2-bootstrap.min.css" %}" />
    <style>
        .mapping-row {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 20px;
            margin-bottom: 20px;
            align-items: start;
        }
        .mapping-row .field {
            margin: 0;
        }
    </style>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script src="{% static "oscar/js/select2/select2.min.js" %}"></script>
    <script>
        $(function() {
            $('.select2').select2();
            
            $('.select2-tags').select2(
                {
                    tags: true
                }
            );

        });
    </script>
{% endblock %}

{% block content %}
    {% include "wagtailadmin/shared/header.html" with title="Payment & shipping method mapping" %}

    <div class="nice-padding">
        {% blocktrans %}
            Link your Exact Online shipping and payment methods to their corresponding webshop methods.<br>
            This ensures orders from your webshop are processed with the correct methods in Exact (if you have any).
        {% endblocktrans %}

        {% block form %}
        <form style="margin-top: 2em;" method="POST" action="{% url 'exactonline_admin:payment-shipping-method-mapping' %}" novalidate>
            {% csrf_token %}
            
            <h2>{% trans 'Shipping Method Mappings' %}</h2>
            {{ shipping_formset.management_form }}
            {% for form in shipping_formset %}
                <div class="mapping-row">
                    {% include "wagtailadmin/shared/field.html" with field=form.exact_guid %}
                    {% include "wagtailadmin/shared/field.html" with field=form.shipping_code %}
                    {% if form.instance.pk %}
                        {% include "wagtailadmin/shared/field.html" with field=form.DELETE %}
                    {% endif %}
                    {{ form.id }}
                </div>
            {% endfor %}

            <h2>{% trans 'Payment Method Mappings' %}</h2>
            {{ payment_formset.management_form }}
            {% for form in payment_formset %}
                <div class="mapping-row">
                    {% include "wagtailadmin/shared/field.html" with field=form.exact_code %}
                    {% include "wagtailadmin/shared/field.html" with field=form.payment_key %}
                    {% if form.instance.pk %}
                        {% include "wagtailadmin/shared/field.html" with field=form.DELETE %}
                    {% endif %}
                    {{ form.id }}
                </div>
            {% endfor %}

            <input type="submit" value="{% trans 'Save' %}" class="button" />
        </form>
        {% endblock %}
    </div>
{% endblock %}