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

{block name='content'}
<section class="cyp-withdrawal-page">
  <header class="page-header">
    <h1>{l s='Widerruf übermittelt' 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 done">
      <div class="cyp-step-bubble">&#10003;</div>
      <div class="cyp-step-label">{l s='Prüfen' mod='simple_withdrawalbutton'}</div>
    </div>
    <div class="cyp-step-line done"></div>
    <div class="cyp-step active">
      <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">
    <div class="cyp-success-header">
      <div class="cyp-success-icon" aria-hidden="true">&#10003;</div>
      {if isset($success_data.mail_ok) && $success_data.mail_ok}
        <h2>{l s='Ihr Widerruf wurde erfolgreich übermittelt.' mod='simple_withdrawalbutton'}</h2>
        <p>{l s='Eine Eingangsbestätigung wurde an Ihre E-Mail-Adresse gesendet.' mod='simple_withdrawalbutton'}</p>
      {else}
        <h2 style="color:var(--cyw-warning);">{l s='Ihr Widerruf wurde gespeichert.' mod='simple_withdrawalbutton'}</h2>
        <p class="alert alert-warning" style="display:inline-block;text-align:left;margin-top:8px;">
          {l s='Die automatische Eingangsbestätigung konnte möglicherweise nicht versendet werden. Bitte kontaktieren Sie uns zusätzlich per E-Mail, falls Sie keine Bestätigung erhalten.' mod='simple_withdrawalbutton'}
        </p>
      {/if}
    </div>

    <div class="cyp-summary">
      {if isset($success_data.created_at)}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Eingangsdatum' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$success_data.created_at|escape:'html':'UTF-8'}</div>
        </div>
      {/if}
      {if isset($success_data.customer_email)}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='E-Mail' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$success_data.customer_email|escape:'html':'UTF-8'}</div>
        </div>
      {/if}
      {if isset($success_data.order_reference) && $success_data.order_reference != ''}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Bestellnummer' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$success_data.order_reference|escape:'html':'UTF-8'}</div>
        </div>
      {/if}
      {if isset($success_data.withdrawal_scope)}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Betrifft' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">
            {if $success_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}
      {if isset($success_data.withdrawal_items_text) && $success_data.withdrawal_items_text != ''}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Betroffene Artikel' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$success_data.withdrawal_items_text|escape:'html':'UTF-8'|nl2br nofilter}</div>
        </div>
      {/if}
      {if isset($success_data.message) && $success_data.message != ''}
        <div class="cyp-summary-row">
          <div class="cyp-summary-key">{l s='Nachricht' mod='simple_withdrawalbutton'}</div>
          <div class="cyp-summary-val">{$success_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>

    <div class="cyp-legal">
      {l s='Diese Bestätigung betrifft nur den Eingang Ihrer Widerrufserklärung. Die weitere Bearbeitung und Prüfung erfolgt separat.' mod='simple_withdrawalbutton'}
    </div>

    <button class="cyp-print-btn" onclick="window.print()" type="button">
      &#9113; {l s='Seite drucken / als PDF speichern' mod='simple_withdrawalbutton'}
    </button>
  </div>
</section>
{/block}