<!DOCTYPE html>
<html lang="es">
    <head>
        <title>{{ $t('subject') }}</title>
    </head>
    <body>
        <section class="container">
            <!-- Header component -->
            <email-header></email-header>
            <!-- End header component -->
            <section class="main">
                <!-- Title block -->
                <div class="title">
                    <h1>{{ $t('title') }}</h1>
                </div>
                <!-- Title block end -->

                <p>{{$t('dearClient')}},</p>
                <p v-html="$t('clientData')"></p>
                
                <p>
                    <div>{{$t('clientId')}}: <strong>{{ id }}</strong></div>
                    <div>{{$t('user')}}: <strong>{{userName}}</strong></div>
                    <div>{{$t('password')}}: <strong>********</strong> 
                        (<a href="https://verdnatura.es">{{$t('passwordResetText')}}</a>)
                    </div>
                </p>

                <h1>{{$t('sections.howToBuy.title')}}</h1>
                <p>{{$t('sections.howToBuy.description')}}</p>
                <ol>
                    <li v-for="requeriment in $t('sections.howToBuy.requeriments')">
                        <span v-html="requeriment"></span>
                    </li>
                </ol>
                <p>{{$t('sections.howToBuy.stock')}}</p>
                <p>{{$t('sections.howToBuy.delivery')}}</p>
                
                <h1>{{$t('sections.howToPay.title')}}</h1>
                <p>{{$t('sections.howToPay.description')}}</p>
                <ul>
                    <li v-for="option in $t('sections.howToPay.options')">
                        <span v-html="option"></span>
                    </li>
                </ul>

                <h1>{{$t('sections.toConsider.title')}}</h1>
                <p>{{$t('sections.toConsider.description')}}</p>

                <h3>{{$t('sections.claimsPolicy.title')}}</h3>
                <p>{{$t('sections.claimsPolicy.description')}}</p>

                <p v-html="$t('help')"></p>
                <p>
                    <section v-if="salesPersonName">
                        {{$t('salesPersonName')}}: <strong>{{salesPersonName}}</strong>
                    </section>
                    <section v-if="salesPersonPhone">
                        {{$t('salesPersonPhone')}}: <strong>{{salesPersonPhone}}</strong>
                    </section>
                    <section v-if="salesPersonEmail">
                        {{$t('salesPersonEmail')}}: 
                        <strong><a v-bind:href="`mailto: ${salesPersonEmail}`" target="_blank">{{salesPersonEmail}}</strong>
                    </section>
                </p>
            </section>
            <!-- Footer component -->
            <email-footer :locale="locale"></email-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>