Overview

<jds-drafting-table @save="save" :back-to="{name: 'Docs'}">
    <template #heading>Configure your subscription</template>

    <jds-checkbox v-model="forceFail">
        Make saving fail
    </jds-checkbox>

    <jds-text-field label="Your name" v-model="form.name" required max-length="10" min-length="3">
        <template #hint>Just for labeling your package.</template>
        <template #error="{ required, max_length, min_length }">
            <template v-if="required">We need your name.</template>
            <template v-if="max_length">This name is too long for our envelopes.</template>
            <template v-if="min_length">For bizarre technical reasons, your name needs to be at least 2 characters long.</template>
        </template>
    </jds-text-field>
    <jds-field-group>
        <jds-text-area-field required label="Mailing address" min-length="5" v-model="form.address.street" rows="10">
        </jds-text-area-field>
        <jds-field-row>
            <jds-text-field label="City" v-model="form.address.city" />
            <jds-text-field label="Postal code" v-model="form.address.postcode" width="5" />
            <jds-text-field label="Country" v-model="form.address.country" />
        </jds-field-row>
    </jds-field-group>

    <jds-select-field label="Region" width="30" v-model="form.region" required>
        <jds-select-field-option value="europe">Europe <template #sub>EU countries and the UK.</template></jds-select-field-option>
        <jds-select-field-option value="asia">Asia</jds-select-field-option>
        <jds-select-field-option value="americas">Americas<template #sub>Both North and South America.</template></jds-select-field-option>
        <jds-select-field-option value="etc">Rest of the world</jds-select-field-option>
        <template #hint>We'll ship your newsletter from our branch closest to you.</template>
    </jds-select-field>

    <jds-text-field label="Donation amount" v-model="form.donation" width="10" required min="75" type="number">
        <template #error="props">{{props}}</template>
    </jds-text-field>

    <jds-text-field label="Your online profile" v-model="form.url" type="url" required>
        <template #error="url">This needs to be a proper URL.</template>
    </jds-text-field>

    <jds-rich-radio-group label="Subscription" v-model="form.subscription" required>
        <jds-rich-radio-option value="subscription">Subscribe me (we'll bill you <jds-money :amount="form.donation*100" currency="EUR" /> every month)</jds-rich-radio-option>
        <jds-rich-radio-option value="one-off" disabled>Just once (we'll bill you <jds-money :amount="form.donation*100" currency="EUR" /> just once)</jds-rich-radio-option>
        <template #hint>How long do you want to stay subscribed?</template>
        <template #error="{ required }">
            <template v-if="required">Pick a subscription.</template>
        </template>
    </jds-rich-radio-group>

    <jds-rich-radio-group label="Gift wrapping" v-model="form.gift" required>
        <jds-rich-radio-option v-for="(i, j) in giftOptions" :key="j" :value="i">{{ i.label }}</jds-rich-radio-option>
    </jds-rich-radio-group>



    <jds-rich-radio-group full-width color="purple" layout="list" label="Credit" v-model="form.credit.who">
        <template #hint>When we print your name on our supporters page, we can credit your full name, or another name of your choice.</template>
        <jds-rich-radio-option value="me">Credit me ({{form.name}})!</jds-rich-radio-option>
        <jds-rich-radio-option :disabled="true" value="anonymous">List me as anonymous</jds-rich-radio-option>
        <jds-rich-radio-option value="custom">
            Customize my name
            <template #sub>
                Credit me as
                <jds-inline-text-field v-model="form.credit.custom" />
            </template>
        </jds-rich-radio-option>
    </jds-rich-radio-group>

    <jds-rich-radio-group layout="grid" label="Edition" v-model="form.edition">
        <template #hint>We print 3 different newsletter topics. If one grabs your fancy, we'll send you that one!</template>
        <jds-rich-radio-option value="vortex" icon="overview">
            Vortex
            <template #sub>Climate science</template>
        </jds-rich-radio-option>
        <jds-rich-radio-option value="aurora" icon="trend-up">
            Aurora
        </jds-rich-radio-option>
        <jds-rich-radio-option value="ursa" icon="analytics">
            Ursa
        </jds-rich-radio-option>
        <jds-rich-radio-option value="random">
            Pick for me!
        </jds-rich-radio-option>
    </jds-rich-radio-group>    <jds-checkbox-group label="Legal stuff">
        <jds-checkbox v-model="form.terms" required>
            I agree to the terms and conditions
            <template #sub>You can read our full terms document <jds-link :to="{name: 'Docs'}">here</jds-link>.</template>
            <template #error="{ required }">
                <template v-if="required">
                    In order to use our service, we need you to agree to our terms of service. Please take a look &mdash; we've worked hard to make it easy to read.
                </template>
            </template>
        </jds-checkbox>
        <jds-checkbox v-model="form.privacy" required>I agree to the privacy policy</jds-checkbox>
    </jds-checkbox-group>
</jds-drafting-table>