<email-body v-bind="$props">
    <div class="grid-row">
        <div class="grid-block vn-pa-ml">
            <h1>{{ $t('title') }}</h1>
            <p>{{$t('dear')}},</p>
            <p v-html="$t('description', [dated])"></p>
        </div>
    </div>
    <div class="grid-row">
        <div class="grid-block vn-pa-ml">
            <table class="column-oriented">
                <thead>
                    <tr>
                        <th>{{$t('buyer')}}</th>
                        <th class="number">{{$t('percentage')}}</th>
                        <th class="number">{{$t('dwindle')}}</th>
                        <th class="number">{{$t('total')}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="waste in wastes" v-bind:key="waste.buyer">
                        <td class="font gray">{{waste.buyer}}</td>
                        <td class="number">{{(waste.percentage / 100) | percentage(2, 2, $i18n.locale)}}</td>
                        <td class="number">{{waste.dwindle | currency('EUR', $i18n.locale)}}</td>
                        <td class="number">{{waste.total | currency('EUR', $i18n.locale)}}</td>
                    </tr>
                </tbody>
            </table>
            <p v-html="$t('wasteDetailLink')"></p>
            <div class="external-link vn-pa-sm vn-m-md">
                <a href="https://salix.verdnatura.es/#!/item/waste/index" target="_blank">
                    https://salix.verdnatura.es/#!/item/waste/index
                </a>
            </div>
        </div>
    </div>
</email-body>