{extends file='layouts/layout-full-width.tpl'}

{block name='content'}
<section class="cyp-withdrawal-page">
  <header class="page-header">
    <h1>{l s='Widerruf bestätigen' mod='simple_withdrawalbutton'}</h1>
  </header>

  <div class="cyp-steps">
    <div class="cyp-step done">
      <div class="cyp-step-bubble">&#10003;</div>
      <div class="cyp-step-label">{l s='Angaben' mod='simple_withdrawalbutton'}</div>
    </div>
    <div class="cyp-step-line done"></div>
    <div class="cyp-step active">
      <div class="cyp-step-bubble">2</div>
      <div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
    </div>
    <div class="cyp-step-line"></div>
    <div class="cyp-step">
      <div class="cyp-step-bubble">3</div>
      <div class="cyp-step-label">{l s='Bestätigt' mod='simple_withdrawalbutton'}</div>
    </div>
  </div>

  <div class="card card-block">
    {if $errors_list|@count > 0}
      <div class="alert alert-danger" role="alert">
        <ul>
          {foreach from=$errors_list item=error}
            <li>{$error|escape:'html':'UTF-8'}</li>
          {/foreach}
        </ul>
      </div>
    {/if}

    <p style="font-size:14px;color:var(--cyw-text-muted);margin-bottom:20px;">
      {l s='Bitte prüfen Sie Ihre Angaben. Wenn alles korrekt ist, klicken Sie auf „Widerruf absenden".' mod='simple_withdrawalbutton'}
    </p>

    <div class="cyp-summary">
      <div class="cyp-summary-row">
        <div class="cyp-summary-key">{l s='Name' mod='simple_withdrawalbutton'}</div>
        <div class="cyp-summary-val">{$form_data.customer_name|escape:'html':'UTF-8'}</div>
      </div>
      <div class="cyp-summary-row">
        <div class="cyp-summary-key">{l s='E-Mail' mod='simple_withdrawalbutton'}</div>
        <div class="cyp-summary-val">{$form_data.customer_email|escape:'html':'UTF-8'}</div>
      </div>
      <div class="cyp-summary-row">
        <div class="cyp-summary-key">{l s='Bestellnummer' mod='simple_withdrawalbutton'}</div>
        <div class="cyp-summary-val">{$form_data.order_reference|escape:'html':'UTF-8'}</div>
      </div>
      <div class="cyp-summary-row">
        <div class="cyp-summary-key">{l s='Betrifft' mod='simple_withdrawalbutton'}</div>
        <div class="cyp-summary-val">
          {if $form_data.withdrawal_scope == 'partial'}
            {l s='einen Teil der Bestellung' mod='simple_withdrawalbutton'}
          {else}
            {l s='die gesamte Bestellung' mod='simple_withdrawalbutton'}
          {/if}
        </div>
      </div>
      {if $form_data.withdrawal_scope == 'partial'}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Betroffene Artikel' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$form_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</div>
        </div>
      {/if}
      {if $form_data.message != ''}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Nachricht' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$form_data.message|escape:'html':'UTF-8'|nl2br nofilter}</div>
        </div>
      {/if}
      {if isset($withdrawal_deadline) && $withdrawal_deadline != ''}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Frist' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val" style="color:var(--cyw-accent);font-weight:600;">
            {l s='bis' mod='simple_withdrawalbutton'} {$withdrawal_deadline|escape:'html':'UTF-8'}
            <span style="font-size:12px;font-weight:400;color:var(--cyw-text-muted);">
              ({l s='14 Tage ab Bestelldatum' mod='simple_withdrawalbutton'})
            </span>
          </div>
        </div>
      {/if}
    </div>

    <form method="post" action="{$action_url|escape:'html':'UTF-8'}">
      <input type="hidden" name="csrf_token"              value="{$csrf_token|escape:'html':'UTF-8'}">
      <input type="hidden" name="customer_name"           value="{$form_data.customer_name|escape:'html':'UTF-8'}">
      <input type="hidden" name="customer_email"          value="{$form_data.customer_email|escape:'html':'UTF-8'}">
      <input type="hidden" name="order_reference"         value="{$form_data.order_reference|escape:'html':'UTF-8'}">
      <input type="hidden" name="withdrawal_scope"        value="{$form_data.withdrawal_scope|escape:'html':'UTF-8'}">
      <input type="hidden" name="withdrawal_items_text"   value="{$form_data.withdrawal_items_text|escape:'html':'UTF-8'}">
      <input type="hidden" name="message"                 value="{$form_data.message|escape:'html':'UTF-8'}">
      <div style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">
        <label for="cyp_withdrawal_hp_confirm">Website</label>
        <input type="text" id="cyp_withdrawal_hp_confirm" name="cyp_hp_v1" value="" tabindex="-1" autocomplete="off">
      </div>

      <div class="cyp-actions">
        <button type="submit" name="submit_withdrawal_confirm" value="1" class="btn btn-primary">
          {l s='Widerruf absenden' mod='simple_withdrawalbutton'}
        </button>
        <button type="submit" name="submit_withdrawal_back" value="1" class="btn btn-secondary">
          {l s='Angaben ändern' mod='simple_withdrawalbutton'}
        </button>
      </div>
    </form>
  </div>
</section>
{/block}