{# @var craft \craft\web\twig\variables\CraftVariable #}
{#
/**
 * Retour plugin for Craft CMS 3.x
 *
 * Retour Dashboard index.twig
 *
 * @author    nystudio107
 * @copyright Copyright (c) 2018 nystudio107
 * @link      https://nystudio107.com/
 * @package   Retour
 * @since     3.0.0
 */
#}

{% requirePermission "retour:redirects" %}

{% extends "retour/_layouts/retour-cp.twig" %}

{% import "_includes/forms" as forms %}

{% block actionButton %}
    <input type="submit" class="btn submit" value="{{ 'Import'|t('app') }}">
{% endblock %}

{% block contextMenu %}
{% endblock %}

{% block content %}
    <input type="hidden" name="action" value="retour/file/import-csv-columns">
    {{ csrfInput() }}
    {{ redirectInput("retour/redirects") }}

    {{ forms.hidden({
        id: "filename",
        name: "filename",
        value: filename,
    }) }}

    <div id="cp-nav-content">
        <div class="field readable">
            <div class="heading">
                <div class="instructions">
                    {{ "Choose the fields to import into Retour from the CSV file by dragging them in the appropriate order. Click on the `x` to delete an unused field." |t("retour") |md }}
                </div>
            </div>
        </div>
        <import-draggable :data="[{% for header in headers %}{id: {{ loop.index0 }}, name: '{{ header | escape('js') }}'},{% endfor %}]"></import-draggable>
        <div class="field readable">
            <div class="heading">
                <div class="instructions">
                    {{ "The **Match Type** field must be either `exactmatch` or `regexmatch` (case sensitive). Anything left blank will be filled in with default values." |t("retour") |md }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block foot %}
    {# include our JavaScript modules #}
    {{ parent() }}
    {% set tagOptions = {
        'depends': [
            'nystudio107\\retour\\assetbundles\\retour\\RetourAsset'
        ],
    } %}
    {{ craft.retour.register('src/js/Import.js', false, tagOptions, tagOptions) }}
{% endblock %}