{% set title = "" %}
{% import "Macros/card.html.twig" as card %}

{% extends 'Default/base.html.twig' %}

{% block container %}
<style>
*{
    --header-height: 6.12vw;
    font-family: montserrat;
}
.anipform label{
    font-size: var(--h6-size);
    text-transform: uppercase;
    display: block;
    margin-top: var(--15px);
}
.anipform label + input,
.anipform label + textarea,
.anipform label + select{
    font-size: var(--h6-size);
    border: 0;
    border: var(--1px) solid var(--gray-color-alt);
    width: 100%;
    background: none;
    border-radius: 0;
    padding: var(--10px) var(--20px);
    margin-top: var(--5px);
    margin-bottom: var(--20px);
}
.os-tab-head{background-color: var(--success-color)!important; color: var(--white-color)}
.os-tab-head.active{
    background-color: white!important;
    box-shadow: -5px -5px 5px rgba(0,0,0,.15);
    color: var(--success-color)}
</style>
<header class="hheight bg-success w100 fixed top left vt-20-in">
    <img class="block h100 block-center filter-white" src="{{asset('images/anip.png')}}">
</header>
<div class='vfill bg-gray gpadding  htop-in flex col center  {{desktop("")}} {{mobile("")}} '>
    <div class='flex col center {{desktop("vt-60-in radius-10")}} {{mobile("vt-30-in")}} '>
        <h1 class="success upper h3 text-center">Vérification<br>de centre de vote</h1>
        <div class="flex row center top-40">
            <div class="os-tab-head upper nodefault pointer flex row middle center radius-top-20 hz-25-in vt-15-in" data-target="#form1">
                <span>Par N° Formulaire</span>
            </div>
            <div class="os-tab-head upper nodefault pointer flex row middle center radius-top-20 hz-25-in vt-15-in" data-target="#form2">
                <span>Par NPI</span>
            </div>
        </div>
        <div class="anipform bg-white shadow radius-10 flex row center">
            <div class=" flex row center">
                <div id="form1" class="os-tab flex row middle center padding-40">
                    <div class=" hoverflow radius-20 flex col center hz-60-in vt-40-in">
                        <div class="">
                            <label>N° du formulaire :</label>
                            <input type="text" placeholder="Requis">
                        </div>
                        <div class="">
                            <label>Date de naissance :</label>
                            <input type="text" placeholder="Requis">
                        </div>
                        <div class="">
                            <label>Numéro de téléphone :</label>
                            <input type="text" placeholder="Requis">
                        </div>
                        <div class="">
                            <button class="hz-20-in vt-10-in upper bg-success white noborder radius-7">Vérifier</button>
                        </div>
                    </div>
                </div>
                <div id="form2" class="os-tab flex row middle center padding-40">
                    <div class=" hoverflow radius-20 flex col center hz-60-in vt-40-in">
                        <div class="">
                            <label>Votre NPI :</label>
                            <input type="text" placeholder="Requis">
                        </div>
                        <div class="">
                            <button class="hz-20-in vt-10-in upper bg-success white noborder radius-7">Vérifier</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}