{{#partial "page"}}

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<h1 class="page-heading">{{lang 'gift_certificate.heading' }}</h1>
{{> components/gift-certificate/navigation gift_page='purchase'}}

<main class="account account--fixed">

    {{#each forms.gift_certificate.errors}}
        {{> components/common/alert/alert-error this}}
    {{/each}}

    <form class="form gift-certificate-form" method="post" id="gift-certificate-form" action="{{forms.gift_certificate.action}}">
        {{#if forms.gift_certificate.cart_item_id}}
            <input type="hidden" name="cartitemid" value="{{forms.gift_certificate.cart_item_id}}">
        {{/if}}
        <div class="form-row form-row--half">
            <div class="form-field">
                <label class="form-label" for="from_name">
                    {{lang 'forms.gift_certificate.purchase.from_name' }}
                    <small>{{lang 'common.required' }}</small>
                </label>
                <input type="text" class="form-input" name="from_name" id="from_name" value="{{forms.gift_certificate.values.from_name}}">
            </div>
            <div class="form-field">
                <label class="form-label" for="from_email">
                    {{lang 'forms.gift_certificate.purchase.from_email' }}
                    <small>{{lang 'common.required' }}</small>
                </label>
                <input type="text" class="form-input" name="from_email" id="from_email" value="{{forms.gift_certificate.values.from_email}}">
            </div>
        </div>
        <div class="form-row form-row--half">
            <div class="form-field">
                <label class="form-label" for="to_name">
                    {{lang 'forms.gift_certificate.purchase.to_name' }}
                    <small>{{lang 'common.required' }}</small>
                </label>
                <input type="text" class="form-input" name="to_name" id="to_name" value="{{forms.gift_certificate.values.to_name}}">
            </div>
            <div class="form-field">
                <label class="form-label" for="to_email">
                    {{lang 'forms.gift_certificate.purchase.to_email' }}
                    <small>{{lang 'common.required' }}</small>
                </label>
                <input type="text" class="form-input" name="to_email" id="to_email" value="{{forms.gift_certificate.values.to_email}}">
            </div>
        </div>
        <div class="form-row">
            <fieldset class="form-fieldset form-column">
                {{#if forms.gift_certificate.can_use_custom_amount }}
                    <div class="form-field">
                        <label class="form-label" for="certificate_amount">
                            {{lang 'forms.gift_certificate.purchase.amount' }}
                            <small>{{lang 'common.required' }}</small>
                        </label>
                        <input type="text" data-min="{{forms.gift_certificate.minimum.value}}" data-max="{{forms.gift_certificate.maximum.value}}" data-min-formatted="{{forms.gift_certificate.minimum.formatted}}" data-max-formatted="{{forms.gift_certificate.maximum.formatted}}" class="form-input" name="certificate_amount" id="certificate_amount" value="{{forms.gift_certificate.values.amount.value}}">
                    </div>
                {{else}}
                    <div class="form-field">
                        <label class="form-label" for="selected_amount">
                            {{lang 'forms.gift_certificate.purchase.amount' }}
                            <small>{{lang 'common.required' }}</small>
                        </label>
                        <select class="form-select" name="selected_amount" id="selected_amount">
                            {{#each forms.gift_certificate.amount_options}}
                                <option value="{{value}}">{{formatted}}</option>
                            {{/each}}
                        </select>
                    </div>
                {{/if}}
                {{#if forms.gift_certificate.expires_in_days }}
                    <div class="form-field">
                        <input type="checkbox" class="form-checkbox" name="agree" id="agree">
                        <label class="form-label" for="agree">{{lang 'forms.gift_certificate.purchase.agree' days=forms.gift_certificate.expires_in_days}}</label>
                    </div>
                {{/if}}
                <div class="form-field">
                    <input type="checkbox" class="form-checkbox" name="agree2" id="agree2"{{#if forms.gift_certificate.editing}} checked{{/if}}>
                    <label class="form-label" for="agree2">{{lang 'forms.gift_certificate.purchase.agree2' }}</label>
                </div>
            </fieldset>
            <fieldset class="form-fieldset form-column">
                <div class="form-field">
                    <label class="form-label" for="message">{{lang 'forms.gift_certificate.purchase.message' }}</label>
                    <textarea class="form-input" name="message" id="message" rows="8" >{{forms.gift_certificate.values.message}}</textarea>
                </div>
                <label class="form-label">
                    {{lang 'forms.gift_certificate.purchase.theme' }}
                    <small>{{lang 'common.required' }}</small>
                </label>
                <div class="form-field form-field-group">
                    {{#each forms.gift_certificate.themes}}
                        <input type="radio" class="form-radio" name="certificate_theme" id="theme_{{this.value}}" value="{{this.value}}"{{#if this.value '==' ../forms.gift_certificate.values.theme}} checked{{/if}}>
                        <label class="form-label" for="theme_{{this.value}}">{{this.display}}</label>
                    {{/each}}
                </div>
            </fieldset>
        </div>
        <div class="form-actions">
            {{inject 'previewError' (lang 'forms.gift_certificate.purchase.preview_error')}}
            {{inject 'enterAmount' (lang 'forms.validate.gift.amount')}}
            {{inject 'toName' (lang 'forms.validate.gift.to_name')}}
            {{inject 'toEmail' (lang 'forms.validate.gift.to_email')}}
            {{inject 'fromName' (lang 'forms.validate.gift.from_name')}}
            {{inject 'fromEmail' (lang 'forms.validate.gift.from_email')}}
            {{inject 'certTheme' (lang 'forms.validate.gift.cert_theme')}}
            {{inject 'agreeToTerms' (lang 'forms.validate.gift.agree_terms')}}
            <input
                id="gift-certificate-preview"
                class="button"
                type="submit"
                value="{{lang 'forms.gift_certificate.purchase.preview' }}"
                data-preview-url="{{forms.gift_certificate.preview}}">

            <input
                id="gift-certificate-submit"
                class="button button--primary"
                type="submit"
                value="{{lang 'forms.gift_certificate.purchase.submit_value' }}">
        </div>
    </form>
</main>
{{/partial}}
{{> layout/base}}