<!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('sections.introduction.title') }},</p>
                <p>{{ $t('sections.introduction.description') }}</p>
                <p>{{ $t('sections.introduction.terms') }}</p>

                <p>
                    {{ $t('sections.payMethod.description') }}:
                    <ol>
                        <li v-for="option in $t('sections.payMethod.options')">
                            {{ option }}
                        </li>
                    </ol>
                </p>

                <p>
                    {{ $t('sections.legalAction.description') }}:
                    <ol type="a">
                        <li v-for="option in $t('sections.legalAction.options')">
                            {{ option }}
                        </li>
                    </ol>
                </p>

                <p v-html="$t('contactPhone')"></p>
                <p v-html="$t('conclusion')"></p>

                <p>
                    <div class="row">
                        <div class="text">{{bankName}}</div>
                        <div class="control">{{iban}}</div>
                        <div class="description">
                            <div class="line"><span>{{$t('transferAccount') }}</span></div>
                        </div>
                    </div>
                </p>
            </section>
            <!-- Footer component -->
            <email-footer :locale="locale"></email-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>