<!DOCTYPE html>
<html lang="es">
    <body>
        <section class="container" id="report">
            <!-- Header component -->
            <report-header :locale="route.locale"></report-header>
            <!-- End header component -->
            <section class="main">
                <h1 class="title uppercase">{{$t('Title')}}</h1>
                    <section class="panel">
                        <section class="header">{{$t('Information')}}</section>
                        <section class="body">
                            <section>
                                <table width="100%">
                                    <tbody>
                                        <tr>
                                            <th class="font gray align-right">{{$t('Route')}}</th>
                                            <td>{{route.id}}</td>
                                            <th class="font gray align-right">{{$t('Driver')}}</th>
                                            <td>{{route.userNickName}}</td>
                                        </tr>
                                        <tr>
                                            <th class="font gray align-right">{{$t('Date')}}</th>
                                            <td>{{date(route.created)}}</td>
                                            <th class="font gray align-right">{{$t('Vehicle')}}</th>
                                            <td>{{route.vehicleTradeMark}} {{route.vehicleModel}}</td>
                                        </tr>
                                        <tr>
                                            <th class="font gray align-right">{{$t('Time')}}</th>
                                            <td>{{time(route.time)}}</td>
                                            <td></td>
                                            <td>{{route.plateNumber}}</td>
                                        </tr>
                                        <tr>
                                            <th class="font gray align-right">{{$t('Volume')}}</th>
                                            <td>{{route.m3}}</td>
                                            <th class="font gray align-right">{{$t('Agency')}}</th>
                                            <td>{{route.agencyName}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <section class="contained">
                                    <table class="middle centered" width="70%">
                                        <tbody>
                                            <tr>
                                                <td>                                
                                                    <p class="small">Hora inicio</p>
                                                </td>
                                                <td>                                
                                                    <p class="small">Hora fin</p>
                                                </td>
                                                <td class="gap"></td>
                                                <td>                                
                                                    <p class="small">Km inicio</p>
                                                </td>
                                                <td>                                
                                                    <p class="small">Km fin</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td v-for="i in 2">                                
                                                    <section class="field rectangle">
                                                        <span></span>
                                                    </section>
                                                </td>
                                                <td class="gap"></td>
                                                <td v-for="i in 2">                                
                                                    <section class="field rectangle">
                                                        <span></span>
                                                    </section>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </section>
                            </section>
                        </section>
                    </section>
                    <section class="non-page-break" v-for="ticket in tickets">
                        <section>
                            <table class="column-oriented repeatable">
                                <thead>
                                    <tr>
                                        <td class="number">{{$t('Order')}}</td>
                                        <td class="number">{{$t('Ticket')}}</td>
                                        <td>{{$t('Client')}}</td>
                                        <td class="number">{{$t('Address')}}</td>
                                        <td class="number">{{$t('Packages')}}</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="number">{{ticket.priority}}</td>             
                                        <td class="number">{{ticket.id}}</td>
                                        <td>{{ticket.clientFk}} {{ticket.addressName}}</td>
                                        <td v-if="ticket.addressFk" class="number">
                                            {{ticket.addressFk.toString().substr(0, ticket.addressFk.toString().length - 3)}}
                                            <span class="black-container">
                                                {{ticket.addressFk.toString().substr(-3, 3)}}
                                            </span>
                                        </td>
                                        <td class="number">{{ticket.packages}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                        <section>
                            <table width="100%">
                                <tbody>
                                    <tr>
                                        <th class="font gray align-right">{{$t('Street')}}</th>
                                        <td>{{ticket.street}}</td>
                                        <th class="font gray align-right">{{$t('Postcode')}}</th>
                                        <td>{{ticket.postalCode}}</td>
                                    </tr>
                                    <tr>
                                        <th class="font gray align-right">{{$t('City')}}</th>
                                        <td>{{ticket.city}}</td>
                                        <th class="font gray align-right">{{$t('Agency')}}</th>
                                        <td>{{ticket.ticketAgency}}</td>
                                    </tr>
                                    <tr>
                                        <th class="font gray align-right">{{$t('Mobile')}}</th>
                                        <td>{{ticket.mobile}}</td>
                                        <th class="font gray align-right">{{$t('Phone')}}</th>
                                        <td>{{ticket.phone}}</td>
                                    </tr>
                                    <tr>
                                        <th class="font gray align-right">{{$t('Warehouse')}}</th>
                                        <td>{{ticket.warehouseName}}</td>
                                        <th class="font gray align-right">{{$t('salesPerson')}}</th>
                                        <td>{{ticket.salesPersonName}}</td>
                                    </tr>
                                    <tr>
                                        <th class="font gray align-right">{{$t('Import')}}</th>
                                        <td>{{ticket.import}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <section v-if="ticket.description || ticket.shipFk" class="text-area">
                                <p>{{ticket.description}}</p>
                                <p v-if="ticket.shipFk">{{$t('stowaway')}}: {{ticket.shipFk}}</p>
                            </section>
                        </section>
                    </section>
                </section>
            </section>
            <!-- Footer component -->           
            <report-footer id="pageFooter"
                :left-text="$t('route', [route.id])"
                :locale="route.locale">
            </report-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>