<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
    <title>{{#i18n}}directory.admin.massMailing{{/i18n}}</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            color: #555;
            line-height: 1.4;
        }
        @page {
            size: A4;
        }
        @media print {
            html, body {
                width: 210mm;
                height: 297mm;
            }
        }
        p {
            font-size: 12px;
            margin: 0;
        }
        strong {
            color: #444;
        }
        a {
            color: #3889c1;
        }
        .card {
            float: left;
            width: 8cm;
            min-height: 5.9cm;
            max-height: 6cm;
            border: 0.5px dashed #ccc;
            padding: 15px;
            margin: 0;
        }
        .identity {
            position: relative;
        }
        .logo {
            width: 100px;
            position: absolute;
            right: -6px;
            top: -6px;
            background-color: #fff;
        }
        .grade {
            display: inline-block;
            font-size: 11px;
            line-height: 12px;
            font-style: oblique;
        }
        .relative {
            height: 48px;
            overflow: hidden;
        }
        .mt-12 {
            margin-top: 12px;
        }
        .name {
            margin: 0;
            font-size: 14px;
            line-height: 1.1;
        }
        .truncated {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .activated {
            font-style: oblique;
        }
    </style>
</head>

<body>
    {{#blocks}}
    <div style="page-break-after:always;">
        {{#users}}
        <div class="card">
            <div class="identity">
                <img class="logo" src="illustrations/logo.png"></img>
                <h2 class="name truncated">{{displayName}}</h2>
                {{^isGuestOrPersonnel}}
                <strong class="grade truncated">{{#i18n}}{{profile}}{{/i18n}}{{#firstClass}} {{#i18n}}classAdmin.template.class{{/i18n}} <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</strong>
                {{/isGuestOrPersonnel}}
                {{#isGuestOrPersonnel}}
                <strong class="grade truncated">{{#i18n}}{{profile}}{{/i18n}}</strong>
                {{/isGuestOrPersonnel}}
            </div>
            {{#firstChild}}
            <p class="relative mt-12"><strong>{{#i18n}}classAdmin.template.relative{{/i18n}} : </strong><br />{{firstName}} {{lastName}}{{#otherChildren}}, {{firstName}} {{lastName}}{{/otherChildren}}</p>
            {{/firstChild}}
            <p class="mt-12"><strong>{{#i18n}}classAdmin.template.id{{/i18n}} : </strong>{{login}}</p>
            {{#activationCode}}
            <p><strong>{{#i18n}}classAdmin.template.code{{/i18n}} : </strong>{{activationCode}}</p>
            {{/activationCode}}
            {{^activationCode}}
            {{^resetCode}}
            <p class="activated">{{#i18n}}classAdmin.template.activated{{/i18n}}</p>
            {{/resetCode}}
            {{#resetCode}}
            <p><strong>{{#i18n}}classAdmin.template.reset{{/i18n}} : </strong>{{resetCode}}</p>
            {{/resetCode}}
            {{/activationCode}}
            <p class="mt-12">
                <strong>{{#i18n}}classAdmin.template.url{{/i18n}} :</strong><br />
                <a href="#">{{hostname}}</a><br />
                {{#i18n}}classAdmin.template.downloadAppInfo{{/i18n}}
            </p>
        </div>
        {{/users}}
        {{^end}}
        <div>&nbsp;</div>
        {{/end}}
    </div>
    {{/blocks}}
</body>
</html>