<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style media="all">

        {% block style %}
        html {
            width: 21cm;
            height: 100%;
        }

        @page {
            margin: 180px 50px;
        }

        body {
            height: 100%;
        }

        .Style1 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-weight: bold;
            color: #FFFFFF;
        }

        .Style2 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-weight: bold;
        }

        .Style3 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 8px;
            color: #FFFFFF;
            vertical-align: text-top;
        }

        .Style4 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 9px;
        }

        .Style5 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
        }

        .Style7 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 16px;
        }

        .Style8 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .Style9 {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-weight: bold;
        }

        .relative {
            position: relative;
        }

        #year_head {
            position: absolute;
            bottom: 10px;
            left: 100px;
            color: #9d1348;
            font-size: 25px;
            font-weight: bold;
        }

        .avatar {
            max-width: 85px;
            max-height: 82px;
        }

        #year_card {
            position: absolute;
            bottom: 75px;
            left: 55px;
            color: #9d1348;
            font-size: 14px;
            font-weight: bold;
        }

        .Style2 p, .Style4 p {
            margin: 0;
            padding: 0;
        }

        .page_break {
            page-break-before: always;
            top: 0 !important;
            margin-top: 0 !important;
            position: initial;
        }

        #card {
            position: relative;
            z-index: 1;
            top: 0;
            left: 0;
            margin: 50px auto;
        }

        .card_dimension {
            width: 110mm;
            height: 72mm;
        }

        #dashed {
            width: 106mm;
            height: 66mm;
            border: 1px dashed #0f0f0f;
            position: absolute;
            border-radius: 4px;
            top: 2mm;
            left: 2mm;
            z-index: 2;
        }

        #scissor{
            position: absolute;
            top: 0;
            left: 15px;
        }

        .up {
            padding-top: 100px;
        }

        .bottom {
            padding-top: 20px;
        }

        #qrCode {
            padding-right: 15px;
        }

        #avatar{
            padding-left: 5px;
        }

        {% endblock style %}
    </style>

    <link
            href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
            crossorigin="anonymous"
    />

    <title>Licence CMF</title>
</head>

<body>
{% block content %}
    {% for licence in model.licences %}
        <page data-iri="{{ licence.id }}">
            <table width="793" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td width="693">
                        <table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tbody>
                            <tr>
                                <td width="340" class="relative">
                                    <img src="{{ absPath('images/cmf_licence.png') }}"
                                            width="170" height="86"/>
                                    <span id="year_head">{{ licence.year }}</span>
                                </td>
                                <td width="340">
                                    <div align="right">
                                        <img src="{{ absPath('images/cmf-reseau.png') }}"
                                                width="200" height="86"/>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class="Style7">
                            {% if licence.personGender %}{{ (licence.personGender ~ '_LONG') | trans }}{% endif %}
                            {{ licence.personLastName }} {{ licence.personFirstName }}
                            ,</p>

                        <p class="Style7"></p>
                        <p class="Style8">Vous trouverez ci-joint votre <strong>Licence CMF pour
                                l’année {{ licence.year }}</strong>.
                        </p>
                        <p class="Style8">Vous pouvez : </p>
                        <ul class="Style8">
                            <li> Imprimer ce document tel quel et le garder au format A4.</li>
                            <li> Imprimer ce document sur du papier cartonné et le découper selon les pointillés.</li>
                            <li> Enregister le PDF pour garder ce document au format numérique.</li>
                        </ul>
                        <p class="Style8">Cette licence et le numéro associé vous sera utile pour bénéficier des
                            avantages partenaires mis en place par la CMF.
                            Pour connaître les partenariats existants, rendez-vous sur [
                            <a href="https://www.cmf-musique.org/services/tarifs-preferentiels/">
                                www.cmf-musique.org/services/tarifs-preferentiels/
                            </a>]
                        </p>
                        <p class="Style8">
                            Nous vous rappelons que la Licence CMF, personnelle et unique, <br/>
                            est <strong>valable jusqu’au 31 décembre de l’année {{ licence.year }}</strong>.
                        </p>
                        <p class="Style8"></p>
                        <hr/>
                    </td>
                </tr>
                </tbody>
            </table>

            <div id="card" class="card_dimension">
                <table class="card_dimension" align="center" cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td height="26" colspan="3" align="center" valign="bottom" bgcolor="{{ licence.color }}">
                            <div align="center"><span class="Style1">Licence CMF</span></div>
                        </td>
                    </tr>
                    <tr class="up">
                        {% if licence.isOrganizationLicence %}
                            <td width="80" id="avatar">
                                <div align="center">
                                    {% if(licence.logo is null) %}
                                        <img src="{{ absPath('images/picto_face.png') }}"
                                             width="85"
                                             height="82"/>
                                    {% else %}
                                        <img src="{{ toBase64Src(licence.logo) }}"
                                             width="85"
                                             height="82"/>
                                    {% endif %}
                                </div>
                            </td>
                            <td colspan="2">
                                <span class="Style2">
                                    <p>{{ licence.personLastName }} {{ licence.personFirstName }}</p>
                                    <p>{{ licence.organizationName }}</p>
                                    <p>{{ licence.federationName }}</p>
                                    <p>N° : {{ licence.organizationIdentifier }}</p>
                                    <p>Licence valable jusqu’au 31/12/{{ licence.year }}</p>
                                </span>
                            </td>
                        {% else %}
                            <td width="80" id="avatar">
                                <div align="center">
                                    {% if(licence.personAvatar is null) %}
                                        <img
                                                src="{{ absPath('images/picto_face.png') }}"
                                                width="85"
                                                height="82"/>
                                    {% else %}
                                        <img class="avatar"
                                             src="{{ toBase64Src(licence.personAvatar) }}"/>
                                    {% endif %}
                                </div>
                            </td>
                            <td colspan="2">
                                <span class="Style2">
                                   <p>{{ licence.personLastName }} {{ licence.personFirstName }}</p>
                                   <p>{{ licence.organizationName }}</p>
                                   <p>?</p>
                                  <p>N° : {{ licence.organizationIdentifier }}-{{ licence.personId }}</p>
                                <p>Licence valable jusqu’au 31/12/{{ licence.year }}</p>
                                </span>
                            </td>
                        {% endif %}
                    </tr>

                    <tr class="bottom">
                        <td width="70" valign="middle"
                            style="vertical-align: top;">
                            <div align="center">
                                <img src="{{ absPath('images/cmf_licence.png') }}"
                                     height="45"/>
                                <span id="year_card">{{ licence.year }}</span>
                            </div>
                        </td>
                        <td width="140" align="right" valign="middle">
                            <div align="right"><span class="Style4">
                                <p>Consultez vos</p>
                                <p> avantages sur</p>
                                <p>www.cmf-musique.org</p>
                                <p> ou flashez ce code</p></span>
                            </div>
                        </td>
                        <td width="70" align="right" valign="middle" id="qrCode">
                            {% if(licence.qrCode) %}
                                <img style="margin-right: 10px;"
                                     src="{{ toBase64Src(licence.qrCode) }}"
                                     alt=""
                                     width="65" height="65"/>
                            {% endif %}
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3" align="center" bgcolor="{{ licence.color }}"><span class="Style3">CMF ● cmf@cmf-musique.org ● 01 55 58 22 82 ● www.cmf-musique.org</span>
                        </td>
                    </tr>

                    </tbody>
                </table>

                <div id="dashed"></div>
                <i class="fa fa-scissors" id="scissor" aria-hidden="true"></i>
            </div>


            <table width="793" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td></td>
                    <td>
                        <hr/>
                        <p align="center" class="Style9">Vous rencontrez des difficultés pour utiliser cette carte ?</p>
                        <p align="center" class="Style8">Contactez nous : <br/>
                            CMF<br/>
                            cmf@cmf-musique.org<br/>
                            01 55 58 22 82 </p>
                    </td>
                    <td></td>
                </tr>
                </tbody>
            </table>
            <div class="page_break"></div>
        </page>
    {% endfor %}
{% endblock content %}
</body>
</html>
