<div class="description">
    <p>
        {{ $sub }}
    </p>
</div>

<form method="post" action="{{ route('account.addresses.store') }}" class="settings">
    @csrf
    @method('patch')

    {{-- home address --}}
    <h3>{{ __('account.address.home') }}</h3>
    <div class="input-row input-row--1-1">
        <div class="input-cell">
            <x-input.label for="home_label" :value="__('account.address.label')" />
            <x-input.text id="home_label" name="home[label]" type="text" placeholder="Home" :value="old('home.label', $home->label ?? '')" />
            <x-input.error :messages="$errors->get('home.label')" />
        </div>
        <div class="input-cell">
            <x-input.label for="home_country" :value="__('account.address.country')" />
            <x-input.text id="home_country" name="home[country]" type="text" :value="old('home.country', $home->country ?? '')" />
            <x-input.error :messages="$errors->get('home.country')" />
        </div>
    </div>
    <div class="input-row input-row--1-1">
        <div class="input-cell">
            <x-input.label for="home_line1" :value="__('account.address.line1')" />
            <x-input.text id="home_line1" name="home[line1]" type="text" :value="old('home.line1', $home->line1 ?? '')" />
            <x-input.error :messages="$errors->get('home.line2')" />
        </div>
        <div class="input-cell">
            <x-input.label for="home_line2" :value="__('account.address.line2')" />
            <x-input.text id="home_line2" name="home[line2]" type="text" :value="old('home.line2', $home->line2 ?? '')" />
            <x-input.error :messages="$errors->get('home.line2')" />
        </div>
    </div>
    <div class="input-row input-row--2-1-1">
        <div class="input-cell">
            <x-input.label for="home_city" :value="__('account.address.city')" />
            <x-input.text id="home_city" name="home[city]" type="text" :value="old('home.city', $home->city ?? '')" />
            <x-input.error :messages="$errors->get('home.city')" />
        </div>
        <div class="input-cell">
            <x-input.label for="home_state" :value="__('account.address.state')" />
            <x-input.select-state id="home_state" name="home[state]" :selected="$home->state ?? ''" autocomplete="address-level1" />
            <x-input.error :messages="$errors->get('home.state')" />
        </div>
        <div class="input-cell">
            <x-input.label for="home_postal" :value="__('account.address.zip')" />
            <x-input.text id="home_postal" name="home[postal]" type="text" :value="old('home.postal', $home->postal ?? '')" />
            <x-input.error :messages="$errors->get('home.postal')" />
        </div>
    </div>
    <div class="input-row input-row--1">
        <div class="input-cell">
            <x-input.radio-label :label="__('account.billing.home')" id="billing_home" value="home" name="billing" :checked="old('billing', $billing) === 'home'" />
        </div>
    </div>

    {{-- work address --}}
    <h3 class="mt-12">{{ __('account.address.work') }}</h3>
    <div class="input-row input-row--1-1">
        <div class="input-cell">
            <x-input.label for="work_label" :value="__('account.address.label')" />
            <x-input.text id="work_label" name="work[label]" type="text" placeholder="Work" :value="old('work.label', $work->label ?? '')" />
            <x-input.error :messages="$errors->get('work.label')" />
        </div>
        <div class="input-cell">
            <x-input.label for="work_country" :value="__('account.address.country')" />
            <x-input.text id="work_country" name="work[country]" type="text" :value="old('work.country', $work->country ?? '')" />
            <x-input.error :messages="$errors->get('work.country')" />
        </div>
    </div>
    <div class="input-row input-row--1-1">
        <div class="input-cell">
            <x-input.label for="work_line1" :value="__('account.address.line1')" />
            <x-input.text id="work_line1" name="work[line1]" type="text" :value="old('work.line1', $work->line1 ?? '')" />
            <x-input.error :messages="$errors->get('work.line2')" />
        </div>
        <div class="input-cell">
            <x-input.label for="work_line2" :value="__('account.address.line2')" />
            <x-input.text id="work_line2" name="work[line2]" type="text" :value="old('work.line2', $work->line2 ?? '')" />
            <x-input.error :messages="$errors->get('work.line2')" />
        </div>
    </div>
    <div class="input-row input-row--2-1-1">
        <div class="input-cell">
            <x-input.label for="work_city" :value="__('account.address.city')" />
            <x-input.text id="work_city" name="work[city]" type="text" :value="old('work.city', $work->city ?? '')" />
            <x-input.error :messages="$errors->get('work.city')" />
        </div>
        <div class="input-cell">
            <x-input.label for="work_state" :value="__('account.address.state')" />
            <x-input.select-state id="work_state" name="work[state]" :selected="$work->state ?? ''" autocomplete="address-level1" />
            <x-input.error :messages="$errors->get('work.state')" />
        </div>
        <div class="input-cell">
            <x-input.label for="work_postal" :value="__('account.address.zip')" />
            <x-input.text id="work_postal" name="work[postal]" type="text" :value="old('work.postal', $work->postal ?? '')" />
            <x-input.error :messages="$errors->get('work.postal')" />
        </div>
    </div>
    <div class="input-row input-row--1">
        <div class="input-cell">
            <x-input.radio-label :label="__('account.billing.work')" id="billing_work" value="work" name="billing" :checked="old('billing', $billing) === 'work'" />
        </div>
    </div>

    {{-- save --}}
    <div class="input-row input-row--actions input-row--start sticky-bottom">
        <x-button type="submit" variant="primary">{{ __('common.save_changes') }}</x-button>
        <x-button type="anchor" variant="tertiary" href="{{ route('account.addresses') }}">{{ __('common.cancel') }}</x-button>

        @if (session('status') === 'addresses-updated')
            <p
                x-data="{ show: true }"
                x-show="show"
                x-transition
                x-init="setTimeout(() => show = false, 2000)"
                class="text-sm text-gray-600"
            >{{ __('Saved.') }}</p>
        @endif
    </div>
</form>
