<!DOCTYPE html>
<html lang="es">
    <body>
        <section class="container">
            <!-- Header component -->
            <report-header :locale="locale"></report-header>
            <!-- End header component -->
            <section class="main">
                <h1 class="title centered">{{$t('title')}}</h1>
                <section class="panel">
                    <section class="header">{{$t('Creditor')}}</section>
                    <section class="body">
                        <table class="row-oriented">
                            <tbody>
                                <tr>
                                    <td >{{$t('supplier.name')}}:</td>
                                    <th>{{supplierName}}</th>
                                </tr>
                                <tr>
                                    <td>{{$t('supplier.street')}}:</td>
                                    <th>{{supplierStreet}}</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <th>{{supplierPostCode}}, {{supplierCity}} ({{supplierProvince}})</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <th>{{supplierCountry}}</th>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </section>
                <section class="panel">
                    <section class="header">{{$t('Deptor')}}</section>
                    <section class="body">
                        <table class="row-oriented">
                            <tbody>
                                <tr>
                                    <td>{{$t('client.name')}}:</td>
                                    <th>{{clientName}}</th>
                                </tr>
                                <tr>
                                    <td>{{$t('client.street')}}:</td>
                                    <th>{{clientStreet}}</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <th>{{clientPostCode}}, {{clientCity}} ({{clientProvince}})</th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <th>{{clientCountry}}</th>
                                </tr>
                                <tr>
                                    <td>{{$t('client.fi')}}:</td>
                                    <th>
                                        <section class="field square">
                                            <span v-for="i in 12">{{fi.charAt(i)}}</span>
                                        </section>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </section>
                <p class="font">{{$t('description')}}</p>
                <section class="panel">
                    <section class="header">{{$t('Bank')}}</section>
                    <section class="body">
                        <section class="vertical-text">
                            {{$t('client.toCompleteByClient')}}
                        </section>
                        <table class="row-oriented input-table">
                            <tbody>
                                <tr>
                                    <td>{{$t('bank.name')}}:</td>
                                    <th><span class="emptyField"></span></th>
                                </tr>
                                <tr>
                                    <td>{{$t('bank.street')}}:</td>
                                    <th><span class="emptyField"></span></th>
                                </tr>
                            </tbody>
                        </table>

                        <!-- RIB -->
                        <table class="table-margin">
                            <tbody>
                                <tr>
                                    <td>{{$t('bank.account')}}:</td>
                                </tr>
                                <tr>
                                    <td style="padding-right: 1em">
                                        <section class="field square">
                                            <span v-for="i in 5"></span>
                                        </section>
                                    </td>
                                    <td style="padding-right: 1em">
                                        <section class="field square">
                                            <span v-for="i in 5"></span>
                                        </section>
                                    </td>
                                    <td style="padding-right: 1em">
                                        <section class="field square">
                                            <span v-for="i in 11"></span>
                                        </section>
                                    </td>
                                    <td>
                                        <section class="field square" >
                                            <span v-for="i in 2"></span>
                                        </section>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding-right: 1em">
                                        <div class="line">
                                            <div class="vertical-aligned">
                                                <span>{{$t('bank.bankCode')}}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right: 1em">
                                        <div class="line">
                                            <div class="vertical-aligned">
                                                <span>{{$t('bank.agencyCode')}}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right: 1em">
                                        <div class="line">
                                            <div class="vertical-aligned">
                                                <span>{{$t('bank.accountNumber')}}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="line">
                                            <div class="vertical-aligned">
                                                <span>{{$t('bank.ribKey')}}</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- IBAN -->
                        <table class="table-margin">
                            <tbody>
                                <tr>
                                    <td>IBAN:</td>
                                </tr>
                                <tr>
                                    <td>
                                        <section class="field square">
                                            <span class="grey-background">F</span>
                                            <span class="grey-background">R</span>
                                            <span v-for="i in 23"></span>
                                        </section>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </section>
                <p>{{$t('authorization')}}</p>
                
                <!-- signature -->
                <section class="signature panel">
                    <section class="header">{{$t('client.sign')}}</section>
                    <section class="body centered">
                        <section>
                            <p>{{$t('client.signDate')}}:</p>
                        </section>
                    </section>
                </section>
            </section>
            <!-- Footer component -->
            <report-footer id="pageFooter"
                :left-text="$t('order', [mandateCode])"
                :center-text="clientName"
                :locale="locale">
            </report-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>