{% extends '_layouts/cp.twig' %}

{% set fullPageForm = true %}

{% set crumbs = [
    { label: "Settings"|t('app'), url: url('settings') },
    { label: "Assets"|t('app'), url: url('settings/assets') },
    { label: "Image Transforms"|t('app'), url: url('settings/assets/transforms') }
] %}

{% set formActions = [
  {
    label: 'Save and continue editing'|t('app'),
    redirect: 'settings/assets/transforms/{handle}'|hash,
    shortcut: true,
    retainScroll: true,
  },
] %}

{% set defaultPositionLabel = "Default Focal Point"|t('app') %}
{% set letterboxPositionLabel = "Image Position"|t('app') %}

{% import '_includes/forms.twig' as forms %}


{% block content %}
        {{ actionInput('image-transforms/save') }}
        {{ redirectInput('settings/assets/transforms') }}

        {% if transform.id %}{{ hiddenInput('transformId', transform.id) }}{% endif %}

        {{ forms.textField({
            first: true,
            label: "Name"|t('app'),
            id: 'name',
            name: 'name',
            value: transform.name,
            errors: transform.getErrors('name'),
            autofocus: true,
            required: true,
        }) }}

        {{ forms.textField({
            label: "Handle"|t('app'),
            id: "handle",
            name: "handle",
            class: 'code',
            autocorrect: false,
            autocapitalize: false,
            value: transform.handle,
            errors: transform.getErrors('handle'),
            required: true,
        }) }}

        {% set modeInput %}
            <div id="mode">
                <label id="mode-crop">
                    <input type="radio" name="mode" value="crop"{% if transform.mode == 'crop' %} checked{% endif %}>
                    {{ "Crop"|t('app') }}
                </label>

                <label id="mode-fit">
                    <input type="radio" name="mode" value="fit"{% if transform.mode == 'fit' %} checked{% endif %}>
                    {{ "Fit"|t('app') }}
                </label>

                <label id="mode-letterbox">
                    <input type="radio" name="mode" value="letterbox"{% if transform.mode == 'letterbox' %} checked{% endif %}>
                    {{ "Letterbox"|t('app') }}
                </label>

                <label id="mode-stretch">
                    <input type="radio" name="mode" value="stretch"{% if transform.mode == 'stretch' %} checked{% endif %}>
                    {{ "Stretch"|t('app') }}
                </label>
            </div>
        {% endset %}

        {{ forms.field({
            label: "Mode"|t('app')
        }, modeInput) }}

        <div id="fill-color" class="field {% if transform.mode != 'letterbox' or transform.fill is null %}hidden{% endif %}">
            {{ forms.colorField({
                label: 'Fill Color',
                name: 'fill',
                value: transform.mode == 'letterbox' and transform.fill != 'transparent' ? transform.fill,
                errors: transform.getErrors('fill'),
            }) }}
        </div>

        <div id="position-container"{% if transform.mode not in ['crop', 'letterbox'] %} class="hidden"{% endif %}>
            {% set positionLabel = transform.mode == 'letterbox' ? letterboxPositionLabel : defaultPositionLabel %}
            {{ forms.selectField({
                label: positionLabel,
                id: 'position',
                name: 'position',
                options: {
                    'top-left': "Top-Left"|t('app'),
                    'top-center': "Top-Center"|t('app'),
                    'top-right': "Top-Right"|t('app'),
                    'center-left': "Center-Left"|t('app'),
                    'center-center': "Center-Center"|t('app'),
                    'center-right': "Center-Right"|t('app'),
                    'bottom-left': "Bottom-Left"|t('app'),
                    'bottom-center': "Bottom-Center"|t('app'),
                    'bottom-right': "Bottom-Right"|t('app')
                },
                value: transform.mode in ['crop', 'letterbox'] ? transform.position : 'center-center'
            }) }}
        </div>

        {{ forms.textField({
            label: "Width"|t('app'),
            id: "width",
            name: "width",
            size: 5,
            value: transform.width,
            errors: transform.getErrors('width'),
        }) }}

        {{ forms.textField({
            label: "Height"|t('app'),
            id: "height",
            name: "height",
            size: 5,
            value: transform.height,
            errors: transform.getErrors('height'),
        }) }}

        {{ forms.lightswitchField({
            label: 'Allow Upscaling'|t('app'),
            id: 'upscale',
            name: 'upscale',
            on: transform.upscale ?? craft.app.config.general.upscaleImages,
            errors: transform.getErrors('upscale'),
        }) }}

        {% embed '_includes/forms/field.twig' with {
            label: 'Quality'|t('app'),
            errors: transform.getErrors('quality'),
        } %}
            {% block input %}
                {% import '_includes/forms.twig' as forms %}
                <div class="flex flex-nowrap">
                    <div>
                        {{ forms.select({
                            id: 'quality-picker',
                            options: [
                                {label: 'Auto'|t('app'), value: 0},
                            ]|merge(qualityPickerOptions),
                            value: qualityPickerValue,
                            describedBy: describedBy,
                        }) }}
                    </div>
                    <div class="flex-grow">
                        {{ forms.text({
                            id: 'quality',
                            class: [
                                'ltr',
                                transform.quality == 0 ? 'hidden',
                            ]|filter,
                            name: 'quality',
                            value: transform.quality,
                            size: 5,
                            type: 'number',
                            min: 1,
                            max: 100,
                            describedBy: describedBy,
                        }) }}
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {{ forms.selectField({
            label: "Interlacing"|t('app'),
            id: "interlace",
            name: "interlace",
            options: [
                {label: 'None'|t('app'), value: 'none'},
                {label: 'Line'|t('app'), value: 'line'},
                {label: 'Plane'|t('app'), value: 'plane'},
                {label: 'Partition'|t('app'), value: 'partition'},
            ],
            value: transform.interlace ?? 'none',
            errors: transform.getErrors('interlace'),
        }) }}

        {% set formatOptions = [
            {label: 'Auto', value: null},
            {label: 'jpg', value: 'jpg'},
            {label: 'png', value: 'png'},
            {label: 'gif', value: 'gif'},
        ] %}

        {% if transform.format == 'webp' or craft.app.images.supportsWebP %}
            {% set formatOptions = formatOptions|merge([{label: 'webp', value: 'webp'}]) %}
        {% endif %}

        {% if transform.format == 'avif' or craft.app.images.supportsAvif %}
            {% set formatOptions = formatOptions|merge([{label: 'avif', value: 'avif'}]) %}
        {% endif %}

        {{ forms.selectField({
            label: "Image Format"|t('app'),
            id: "format",
            name: "format",
            instructions: "The image format that transformed images should use."|t('app'),
            value: transform.format,
            errors: transform.getErrors('format'),
            options: formatOptions,
        }) }}


{% endblock %}


{% js %}
    {% if not transform.handle %}new Craft.HandleGenerator('#name', '#handle');{% endif %}

    $('#mode input').change(function() {
        const value = $(this).val();

        // Letterbox mode requires a position:
        if (value == 'letterbox') {
            $('#fill-color').removeClass('hidden');
            $('#position-container label[for="position"]').text(`{{ letterboxPositionLabel }}`);
        } else {
            $('#fill-color').addClass('hidden');
            $('#position-container label[for="position"]').text(`{{ defaultPositionLabel }}`);
        }

        // Crop and letterbox modes requires a position:
        if (value == 'crop' || value == 'letterbox') {
            $('#position-container').removeClass('hidden');
        } else {
            $('#position-container').addClass('hidden');
        }
    });

    const qualityPickerOptions = {{ qualityPickerOptions|map(o => o.value)|json_encode|raw }};
    const $qualityPicker = $('#quality-picker');
    const $qualityInput = $('#quality');

    $qualityPicker.on('change', (ev) => {
        const pickerValue = $qualityPicker.val();
        $qualityInput.val(pickerValue);

        if (pickerValue === '0') {
            $qualityInput.addClass('hidden');
        } else {
            $qualityInput.removeClass('hidden');
        }
    });

    $qualityInput.on('input', (ev) => {
        let quality = parseInt($qualityInput.val());
        if (isNaN(quality)) {
            quality = 0;
        }

        let pickerValue;
        if (quality) {
            // Default to Low, even if quality is < 10
            pickerValue = 10;
            for (let i = 0; i < qualityPickerOptions.length; i++) {
                if (quality >= qualityPickerOptions[i]) {
                    pickerValue = qualityPickerOptions[i];
                } else {
                    break;
                }
            }
        } else {
            // Auto
            pickerValue = 0;
        }

        $qualityPicker.val(pickerValue);
    });
{% endjs %}