<!DOCTYPE html>
<html v-bind:lang="locale">
    <head>
        <meta name="viewport" content="width=device-width">
        <meta name="format-detection" content="telephone=no">
        <title>{{ $t('subject') }}</title>
    </head>
    <body>
        <table class="grid">
            <tbody>
                <tr>
                    <td>
                        <!-- Empty block -->
                        <div class="grid-row">
                            <div class="grid-block empty"></div>
                        </div>
                        <!-- Header block -->
                        <div class="grid-row">
                            <div class="grid-block">
                                <email-header v-bind="$props"></email-header>
                            </div>
                        </div>
                        <!-- Block -->
                        <div class="grid-row">
                            <div class="grid-block vn-pa-lg">
                                <h1>{{ $t('title') }}</h1>
                                <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">{{debtor.bankName}}</div>
                                        <div class="control">{{debtor.iban}}</div>
                                        <div class="description">
                                            <div class="line"><span>{{$t('transferAccount') }}</span></div>
                                        </div>
                                    </div>
                                </p>
                            </div>
                        </div>
                        <!-- Block -->
                        <div class="grid-row" v-if="isPreview">
                            <div class="grid-block vn-pa-lg">
                                <attachment v-for="attachment in attachments" 
                                    v-bind:key="attachment.filename"
                                    v-bind:attachment="attachment"
                                    v-bind:args="$props">
                                </attachment>
                            </div>
                        </div>
                        <!-- Footer block -->
                        <div class="grid-row">
                            <div class="grid-block">
                                <email-footer v-bind="$props"></email-footer>
                            </div>
                        </div>
                        <!-- Empty block -->
                        <div class="grid-row">
                            <div class="grid-block empty"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>