{% extends "NoccyLabsPdfBundle:Pdf:document.html.twig" %}
{% import "NoccyLabsPdfBundle:Pdf:document.html.twig" as page %}
{% import _self as helpers %}

{% block footer %}
    <table class="full-width">
    <tr>
        <td>
            <div class="small">Postal address:</div>
            <div>Some Company Name<br>1234 Address St.<br>12345 Somewhere</div>
        </td>
        <td>
            <div class="small">Postal address:</div>
            <div>Some Company Name<br>1234 Address St.<br>12345 Somewhere</div>
        </td>
        <td>
            <div class="small">Postal address:</div>
            <div>Some Company Name<br>1234 Address St.<br>12345 Somewhere</div>
        </td>
    </tr>
    </table>
{% endblock %}

{% block styles %}
    body {
        font-family: sans-serif;
        font-size: 9pt;
    }
    .small {
        font-size: 7pt;
    }
    table.full-width {
        width: 100%;
    }
    table.bordered {
        border: solid 1px #666;
        border-collapse: collapse;
    }
    table.bordered td,
    table.bordered th {
        padding: 3px;
        vertical-align: top;
    }
    table.bordered thead {
        background: #cde;
        border-bottom: solid 1px #666;
    }
    .page-footer {
        border-top: solid 1px #000;
        padding-top: 5px;
    }
    .monospaced {
        font-family: monospace;
    }
    .align-right {
        text-align: right;
    }
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-2"><div class="small">Client No.</div>123456</div>
        <div class="col-2"><div class="small">Date</div>2017-12-01</div>
        <div class="col-2">Third</div>
        <div class="col-5"></div>
        <div class="col-1"><div class="small">Page</div>1 (2)</div>
    </div>
    <div class="row">
    </div>
    

    <table class="full-width bordered monospaced">
        {{ helpers.thead() }}
        <tbody>
            <tr>
                <td>12345</td>
                <td>Abcd<br>multi-line!</td>
                <td class="align-right" style="background:#def;">199.99</td>
            </tr>
            <tr>
                <td>12345</td>
                <td>Abcd<br>multi-line!</td>
                <td class="align-right" style="background:#def;">199.99</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
        </tbody>
    </table>

    {{ page.break() }}

    <div class="row">
        <div class="col-11">&nbsp;</div>
        <div class="col-1"><div class="small">Page</div>2 (2)</div>
    </div>

    <table class="full-width bordered monospaced">
        {{ helpers.thead }}
        <tbody>
            <tr>
                <td>12345</td>
                <td>Abcd<br>multi-line!</td>
                <td class="align-right" style="background:#def;">199.99</td>
            </tr>
            <tr>
                <td>12345</td>
                <td>Abcd<br>multi-line!</td>
                <td class="align-right" style="background:#def;">199.99</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;<br>&nbsp;</td>
                <td style="background:#def;"></td>
            </tr>
        </tbody>
    </table>
    


{% endblock %}

{% macro thead() %}
        <thead>
            <tr>
                <th width="15%">SKU</th>
                <th>Description</th>
                <th width="10%">Price</th>
            </tr>
        </thead>
{% endmacro %}