{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% load humanize %}
{% load static %}
{% block content %}
<style type="text/css">

    /* https://stackoverflow.com/a/1392794/12597 */
    @page
    {
        margin: 1cm;
        size: landscape;
    }
    
    /* http://www.devx.com/tips/Tip/32962 */
    @media print{
        @page {
            margin: 1cm;
            size: landscape
        }
    }
    
    /* https://stackoverflow.com/a/16655216/12597 */
    @media print{
        .class-name{
            @page{
                margin: 1cm;
                size:landscape;
            }
        }
    }

    @font-face {
        font-family: 'Avenir';
        src: local('Avenir'),
            url("{% static 'registrar/fonts/Avenir-Light.ttf'%}") format("truetype");
    }

    @font-face {
        font-family: 'Avenir Heavy';
        src: local('Avenir'),
            url("{% static 'registrar/fonts/Avenir-Heavy.ttf'%}") format("truetype");
    }

    @font-face {
        font-family: 'Avenir Next';
        src: local('Avenir Next'),
            url("{% static 'registrar/fonts/Avenir-Next-bold.ttf'%}") format("truetype");
    }

    @font-face {
        font-family: 'Avenir Next Condensed';
        src: local('Avenir Next Condensed'),
            url("{% static 'registrar/fonts/Avenir-Next-Condensed-Bold.ttf'%}") format("truetype");
    }

    body {
        background-image: url("{% static 'registrar/constancia_bg.png'%}");
    }

    p {
        margin: 0;
        font-size: 13px;
    }
    p strong {
        font-size: 15px;
    }
    </style>

<div class="pt-4 pb-4 pe-4 ps-4" style="border: 4px solid #ED7422!important;">

    <!-- Encabezado -->
    <header id="header" class="header pt-2">
        <div>
            <img src="{% static 'registrar/logoieebc.png'%}" style="float:left;width:150px; padding-left: 10px;">
            <img src="{% static 'registrar/logoconcurso.png'%}" style="float:right;width:350px; padding-right: 10px;">
        </div>
    </header>
    <br>
    <div class="ms-5 me-4">
        <div class="text-center" style="color: #58595B; margin-top: 100px;">
            <h3 class="mb-3" style="font-family: Avenir Heavy;">El Instituto Estatal Electoral de Baja California a través de la Comisión de <br> Igualdad Sustantiva y No Discriminación</h3>
            <h3 class="mb-2" style="font-family: Avenir Next Condensed;"><strong>Otorga la presente:</strong></h3>
            <h1 class="mb-2" style="font-family: Avenir Next Condensed;"><strong>CONSTANCIA DE PARTICIPACIÓN</strong></h1>
            <h1 class="mb-3" style="font-family: Avenir Next Condensed;"><strong>A</strong></h1>
            <h1 class="mb-5 text-uppercase font-weight-bold" style="color: #722282; font-family: Avenir Next Condensed; font-style: italic;"><strong>{{author_name}}</strong></h1>
        </div>
    
        <div class="text-center mb-4" style="color: #58595B;">
            <h6 style="font-family: Avenir Heavy;">Por su valiosa participación en el Segundo Concurso Estatal de Ensayo 2023, denominado:</h6>
            <h6 style="font-family: Avenir Heavy;">“La importancia de la prevención y erradicación de la violencia política en razón de género”.</h6>
            <h6 style="font-family: Avenir Heavy;">Con el ensayo <strong class="text-decoration-underline" style="font-family: Avenir Next Condensed;">{{ensayo_titulo}}</strong> .</h6>
        </div>
    
        <div class="text-center mb-4" style="color: #58595B;">
            <p style="font-family: Avenir Heavy;">Mexicali, Baja California, a {{fecha}}.</p>
            <p style="font-family: Avenir Heavy;">Atentamente</p>
        </div>
    
        <div class="mb-5 pb-5 ms-5 me-5" style="color: #58595B;">
            <div class="float-start">
                <div class="text-center">
                    <p>_________________________________________________</p>
                    <p style="font-family: Avenir Next;"><strong>Luis Alberto Hernández Morales</strong></p>
                    <p style="font-family: Avenir;">Consejero Presidente del Consejo General del Instituto</p>
                    <p style="font-family: Avenir;">Estatal Electoral de Baja California</p>
                </div>
            </div>
            <div class="float-end">
                <div class="text-center">
                    <p>_________________________________________________</p>
                    <p style="font-family: Avenir Next;"><strong>Vera Juárez Figueroa</strong></p>
                    <p style="font-family: Avenir;">Consejera Electoral y Presidenta de la Comisión de</p>
                    <p style="font-family: Avenir;">Igualdad Sustantiva y No Discriminación</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}