{% extends "commerce/_layouts/store-settings" %}

{% set selectedTab = 'donation' %}
{% import "_includes/forms" as forms %}

{% block content %}
<h2>{{ "Donation Settings"|t('commerce') }}</h2>

<form method="post" accept-charset="UTF-8" data-saveshortcut>
    <input type="hidden" name="action" value="commerce/donations/save">
    {{ redirectInput('commerce/store-settings/donation') }}
    {{ csrfInput() }}

    {% tag 'div' with {
        id: 'donation-available-sku',
        class: not donation.enabled ? 'hidden' : '',
    } %}
        {{ forms.lightSwitchField({
            label: 'Available for purchase?'|t('commerce'),
            id: 'availableForPurchase',
            name: 'availableForPurchase',
            first: true,
            value: 1,
            on: donation.availableForPurchase,
            errors: donation.getErrors('availableForPurchase'),
            toggle: 'sku-field',
        }) }}

        {{ forms.textField({
            fieldClass: [not donation.availableForPurchase ? 'hidden' : '']|filter,
            label: "SKU"|t('commerce'),
            instructions: "The unique SKU of the donation purchasable."|t('commerce'),
            id: 'sku',
            name: 'sku',
            class: 'code',
            value: donation.sku,
            errors: donation.getErrors('sku'),
            autofocus: true,
            required: true,
        }) }}
    {% endtag %}

    {{ forms.lightSwitchField({
        label: 'Enabled'|t('commerce'),
        id: 'enabled',
        name: 'enabled',
        value: 1,
        on: donation.enabled,
        errors: donation.getErrors('enabled'),
        toggle: 'donation-available-sku',
    }) }}

    <div class="buttons">
        <input type="submit" class="btn submit" value="{{ 'Save'|t('commerce') }}">
    </div>
</form>
{% endblock %}