{% load django_bootstrap_italia %}
{% load i18n %}
{% load static %}

<!DOCTYPE html>
<html lang="it">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Page details -->
        <title>{% block page_title %}Bootstrap Italia{% endblock page_title %}</title>
        <meta name="description" content="{% block page_meta_description %}Bootstrap Italia{% endblock page_meta_description %}">
        <meta name="keywords" content="{% block page_meta_keywords %}Bootstrap Italia{% endblock page_meta_keywords %}">
        <meta name="robots" content="{% block page_meta_robots %}all{% endblock page_meta_robots %}" />
        <!-- CSS -->
<!--
        <link rel="stylesheet" href="{% django_bootstrap_italia_static_path 'css/vendor/owl.carousel.min.css' %}">
-->
        <link rel="stylesheet" href="{% django_bootstrap_italia_static_path 'css/bootstrap-italia.min.css' %}">
        <!-- Fonts -->
        <script>window.__PUBLIC_PATH__ = "{% django_bootstrap_italia_static_path 'fonts' %}"</script>
<!--
        <script src="{% django_bootstrap_italia_static_path 'js/vendor/owl.carousel.min.js' %}"></script>
-->
        {% block extra_head %}
        <link rel="icon" href="{% static 'images/favicon.ico' %}">
        <link rel="icon" href="{% static 'images/favicon-32x32.png' %}" sizes="32x32" type="image/png">
        <link rel="icon" href="{% static 'images/favicon-16x16.png' %}" sizes="16x16" type="image/png">
        {% endblock extra_head %}
    </head>
    <body>
        {% block header_wrapper %}
        <div class="it-header-wrapper">

            <!-- Top row in header -->
            {% block header_slim_wrapper %}
            <div class="it-header-slim-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="it-header-slim-wrapper-content">
                                {% block header_slim_top_left %}
                                <a class="d-none d-lg-block navbar-brand" href="{% block header_slim_org_url %}#{% endblock header_slim_org_url %}">
                                    {% block header_slim_org_name %}
                                    Nome Ente/Organizzazione
                                    {% endblock header_slim_org_name %}
                                </a>
                                {% endblock header_slim_top_left %}
                                <div class="nav-mobile">
                                    <nav>
                                        <a class="it-opener d-lg-none" data-toggle="collapse" href="#menu-principale" role="button" aria-expanded="false" aria-controls="menu-principale">
                                            <span>
                                                {% block header_slim_mobile_org_name %}
                                                Nome Ente/Organizzazione
                                                {% endblock header_slim_mobile_org_name %}
                                            </span>
                                            {% block header_mobile_arrow %}
                                            <svg class="icon">
                                                <use xlink:href="{% static 'svg/sprites.svg' %}#it-expand"></use>
                                            </svg>
                                            {% endblock header_mobile_arrow %}
                                        </a>
                                        {% block header_mobile_slim_menu %}
                                        <div class="link-list-wrapper collapse" id="menu-principale">
                                            <ul class="link-list">
                                                <li><a href="#">Link 1</a></li>
                                                <li><a href="#">Link 2 Active</a></li>
                                            </ul>
                                        </div>
                                        {% endblock header_mobile_slim_menu %}
                                    </nav>
                                </div>
                                {% block header_slim_right_zone %}
                                <div class="header-slim-right-zone">

                                    {% block header_slim_sub_menu %}
                                    <div class="nav-item dropdown">
                                        <a class="nav-link btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdown-lang" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span>ITA</span>
                                            <svg class="icon d-none d-lg-block">
                                                <use xlink:href="{% static 'svg/sprites.svg' %}#it-expand"></use>
                                            </svg>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdown-lang">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="link-list-wrapper">
                                                        <ul class="link-list">
                                                            <li><a class="list-item" href="#"><span>ITA</span></a></li>
                                                            <li><a class="list-item" href="#"><span>ENG</span></a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endblock header_slim_sub_menu %}

                                    {% block header_slim_buttons %}
                                    <div class="it-access-top-wrapper">
                                        <button class="btn btn-primary btn-sm" href="#" type="button">{% trans "Accedi" %}</button>
                                    </div>
                                    {% endblock header_slim_buttons %}
                                </div>
                                {% endblock header_slim_right_zone %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endblock header_slim_wrapper %}

            <div class="it-nav-wrapper">
                <div class="it-header-center-wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="{% block header_center_wrapper_columns %}col-12{% endblock header_center_wrapper_columns %}">
                                <div class="it-header-center-content-wrapper">
                                    <!-- Logo -->
                                    {% block header_brand_wrapper %}
                                    <div class="it-brand-wrapper">
                                        <a href="{% block header_center_url %}#{% endblock header_center_url %}">
                                            {% block header_center_logo %}
                                            <svg class="icon">
                                                <use xlink:href="{% static 'svg/sprites.svg' %}#it-code-circle"></use>
                                            </svg>
                                            {% endblock header_center_logo %}

                                            {% block header_brand_text %}
                                            <div class="it-brand-text">
                                                <h2 class="no_toc">
                                                    {% block header_center_org_name %}
                                                    Nome Organizzazione
                                                    {% endblock header_center_org_name %}
                                                </h2>
                                                <h3 class="no_toc d-none d-md-block">
                                                    {% block header_center_org_subname %}
                                                    Sottotitolo Organizzazione
                                                    {% endblock header_center_org_subname %}
                                                </h3>
                                            </div>
                                            {% endblock header_brand_text %}
                                        </a>
                                    </div>
                                    {% endblock header_brand_wrapper %}

                                    <!-- Social and Search -->
                                    {% block header_center_right_zone %}
                                    <div class="it-right-zone">
                                        {% block header_center_social %}
                                        <div class="it-socials d-none d-md-flex">
                                            <span>{% trans "Seguici su" %}</span>
                                            <ul>
                                                <li>
                                                    <a href="#" aria-label="Facebook" target="_blank">
                                                        <svg class="icon">
                                                            <use xlink:href="{% static 'svg/sprites.svg' %}#it-facebook"></use>
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" aria-label="Github" target="_blank">
                                                        <svg class="icon">
                                                        <use xlink:href="{% static 'svg/sprites.svg' %}#it-github"></use>
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank" aria-label="Twitter">
                                                        <svg class="icon">
                                                        <use xlink:href="{% static 'svg/sprites.svg' %}#it-twitter"></use>
                                                        </svg>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        {% endblock header_center_social %}

                                        {% block header_center_search %}
                                        <div class="it-search-wrapper">
                                            {% block header_center_search_text %}
                                            <span class="d-none d-md-block">
                                                {% block header_center_search_word %}
                                                Cerca
                                                {% endblock header_center_search_word %}
                                            </span>
                                            {% endblock header_center_search_text %}

                                            <a class="search-link rounded-icon" href="{% block header_center_search_url %}#{% endblock header_center_search_url %}" aria-label="{% trans 'Cerca' %}">
                                                {% block header_center_search_icon %}
                                                <svg class="icon">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-search"></use>
                                                </svg>
                                                {% endblock header_center_search_icon %}
                                            </a>
                                        </div>
                                        {% endblock header_center_search %}
                                    </div>
                                    {% endblock header_center_right_zone %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main menu -->
                {% block main_menu %}
                <div class="it-header-navbar-wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <nav class="navbar navbar-expand-lg has-megamenu">
                                    <button class="custom-navbar-toggler" type="button" aria-controls="nav10" aria-expanded="false" aria-label="Toggle navigation" data-target="#nav10" data-bs-toggle="navbarcollapsible" data-bs-target="#nav10">
                                        <svg class="icon">
                                            <use xlink:href="{% static 'svg/sprites.svg' %}#it-burger"></use>
                                        </svg>
                                    </button>
                                    <div class="navbar-collapsable" id="nav10">
                                        <div class="overlay"></div>
                                        <div class="close-div sr-only">
                                            <button class="btn close-menu" type="button">
                                                <svg class="icon">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-close-big"></use>
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="menu-wrapper">
                                            <ul class="navbar-nav">
                                                {% block menu_links %}
                                                <li class="nav-item active"><a class="nav-link active" href="#"><span>link 1 attivo</span><span class="sr-only">current</span></a></li>
                                                <li class="nav-item"><a class="nav-link" href="#"><span>link 2</span></a></li>
                                                <li class="nav-item"><a class="nav-link disabled" href="#"><span>link 3 disabilitato</span></a></li>
                                                <li class="nav-item dropdown">
                                                    <a class="nav-link btn btn-dropdown dropdown-toggle" href="#" role="button" id="dropdown-example" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span>Esempio di Dropdown</span>
                                                        <svg class="icon icon-xs">
                                                            <use xlink:href="{% static 'svg/sprites.svg' %}#it-expand"></use>
                                                        </svg>
                                                    </a>
                                                    <div class="dropdown-menu"  aria-labelledby="dropdown-example">
                                                        <div class="link-list-wrapper">
                                                            <ul class="link-list">
                                                                <li>
                                                                    <h3 class="no_toc" id="heading">Heading</h3>
                                                                </li>
                                                                <li><a class="list-item dropdown-item" href="#"><span>Link list 1</span></a></li>
                                                                <li><a class="list-item dropdown-item" href="#"><span>Link list 2</span></a></li>
                                                                <li><a class="list-item dropdown-item" href="#"><span>Link list 3</span></a></li>
                                                                <li><span class="divider"></span></li>
                                                                <li><a class="list-item dropdown-item" href="#"><span>Link list 4</span></a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="nav-item dropdown megamenu">
                                                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false" id="megamenu1">
                                                        <span>Esempio di Megamenu</span>
                                                        <svg class="icon icon-xs">
                                                            <use xlink:href="{% static 'svg/sprites.svg' %}#it-expand"></use>
                                                        </svg>
                                                    </a>
                                                    <div class="dropdown-menu" role="region" aria-labelledby="megamenu1">
                                                        <div class="row">
                                                            <div class="col-12 col-lg-4">
                                                                <div class="link-list-wrapper">
                                                                    <ul class="link-list">
                                                                        <li>
                                                                            <h3 class="no_toc">Heading 1</h3>
                                                                        </li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 1 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 2 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 3 </span></a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-12 col-lg-4">
                                                                <div class="link-list-wrapper">
                                                                    <ul class="link-list">
                                                                        <li>
                                                                            <h3 class="no_toc">Heading 2</h3>
                                                                        </li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 1 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 2 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 3 </span></a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-12 col-lg-4">
                                                                <div class="link-list-wrapper">
                                                                    <ul class="link-list">
                                                                        <li>
                                                                            <h3 class="no_toc">Heading 3</h3>
                                                                        </li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 1 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 2 </span></a></li>
                                                                        <li><a class="list-item dropdown-item" href="#"><span>Link list 3</span></a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                {% endblock menu_links %}
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                {% endblock main_menu %}
            </div>
        </div>
        {% endblock header_wrapper %}

        {% if messages %}
        <!-- Messaggi di sistema-->
        <div class="messaggi">
            {% block messages %}
            <div class="container">
                <div class="col-12 pt-md-5 pt-lg-5 pt-4 bd-content">
                    {% block centered_messages %}
                    {% for message in messages %}
                        <div class="mb-0 alert alert-{{ message.tags }}
                                   {% if 'error' in message.tags%} alert-danger{% endif %}
                                   {% if not forloop.first %}mt-1{% endif %}"
                                   role="alert">{{ message|safe }}</div>
                        {% endfor %}
                    {% endblock centered_messages %}
                </div>
            </div>
            {% endblock messages %}
        </div>
        {% endif %}

        <!-- Container - Body of page-->
        <div class="main-body">
            {% block container %}
            <div class="container">
                <div class="col-12 py-md-5 bd-content">
                    {% block centered_container %}{% endblock %}
                </div>
            </div>
            {% endblock container %}
        </div>

        <!-- Footer -->
        {% block footer %}
        <footer class="it-footer">

            {% block footer_top %}{% endblock footer_top %}

            <div class="it-footer-main">
                <div class="container">
                    {% block footer_top_section %}
                    <section>
                        <div class="row clearfix">
                            <div class="col-sm-12">
                                <div class="it-brand-wrapper">
                                    <a href="{% block footer_logo_url %}#{% endblock footer_logo_url %}">
                                        {% block footer_logo %}
                                        <svg class="icon">
                                            <use xlink:href="{% static 'svg/sprites.svg' %}#it-code-circle"></use>
                                        </svg>
                                        {% endblock footer_logo %}
                                        {% block footer_org_text %}
                                        <div class="it-brand-text">
                                            <h2 class="no_toc">
                                                {% block footer_org_name %}
                                                Lorem Ipsum
                                                {% endblock footer_org_name %}
                                            </h2>
                                            <h3 class="no_toc d-none d-md-block">
                                                {% block footer_org_subname %}
                                                Lorem Ipsum sit amet
                                                {% endblock footer_org_subname %}
                                            </h3>
                                        </div>
                                        {% endblock footer_org_text %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                    {% endblock footer_top_section %}

                    <!-- Footer middle section with menu blocks -->
                    {% block footer_menu_section %}
                    <section>
                        <div class="row">

                            {% block first_column %}
                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                                <h4>
                                    <a href="#" title="Vai alla pagina: Amministrazione">Amministrazione</a>
                                </h4>
                                <div class="link-list-wrapper">
                                    <ul class="footer-list link-list clearfix">
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Giunta e consiglio">Giunta e consiglio</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Aree di competenza">Aree di competenza</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Dipendenti">Dipendenti</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Luoghi">Luoghi</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Associazioni e società partecipate">Associazioni e società partecipate</a></li>
                                    </ul>
                                </div>
                            </div>
                            {% endblock first_column %}

                            {% block second_column %}
                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                                <h4>
                                    <a href="#" title="Vai alla pagina: Servizi">Servizi</a>
                                </h4>
                                <div class="link-list-wrapper">
                                    <ul class="footer-list link-list clearfix">
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Pagamenti">Pagamenti</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Sostegno">Sostegno</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Domande e iscrizioni">Domande e iscrizioni</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Segnalazioni">Segnalazioni</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Autorizzazioni e concessioni">Autorizzazioni e concessioni</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Certificati e dichiarazioni">Certificati e dichiarazioni</a></li>
                                    </ul>
                                </div>
                            </div>
                            {% endblock second_column %}

                            {% block third_column %}
                            <div class="col-lg-3 col-md-3 col-sm-6 pb-2">
                                <h4>
                                    <a href="#" title="Vai alla pagina: Novità">Novità</a>
                                </h4>
                                <div class="link-list-wrapper">
                                    <ul class="footer-list link-list clearfix">
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Notizie">Notizie</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Eventi">Eventi</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Comunicati stampa">Comunicati stampa</a></li>
                                    </ul>
                                </div>
                            </div>
                            {% endblock third_column %}

                            {% block fourth_column %}
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <h4>
                                    <a href="#" title="Vai alla pagina: Documenti">Documenti</a>
                                </h4>
                                <div class="link-list-wrapper">
                                    <ul class="footer-list link-list clearfix">
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Progetti e attività">Progetti e attività</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Delibere, determine e ordinanze">Delibere, determine e ordinanze</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Bandi">Bandi</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Concorsi">Concorsi</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Albo pretorio">Albo pretorio</a></li>
                                    </ul>
                                </div>
                            </div>
                            {% endblock fourth_column %}

                        </div>
                    </section>
                    {% endblock footer_menu_section %}

                    <!-- Footer bottom section with contacts -->
                    {% block footer_contacts_section %}
                    <section class="py-4 border-white border-top">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 pb-2">
                                <h4><a href="#" title="Vai alla pagina: Contatti">Contatti</a></h4>
                                <p>
                                    <strong>Comune di Lorem Ipsum</strong><br> Via Roma 0 - 00000 Lorem Ipsum Codice fiscale / P. IVA: 000000000
                                </p>
                                <div class="link-list-wrapper">
                                    <ul class="footer-list link-list clearfix">
                                        <li><a class="list-item" href="#" title="Vai alla pagina: Posta Elettronica Certificata">Posta Elettronica Certificata</a></li>
                                        <li><a class="list-item" href="#" title="Vai alla pagina: URP - Ufficio Relazioni con il Pubblico">URP - Ufficio Relazioni con il Pubblico</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 pb-2">
                                <h4><a href="#" title="Vai alla pagina: Lorem Ipsum">Lorem Ipsum</a></h4>
                            </div>
                            <div class="col-lg-4 col-md-4 pb-2">
                                <div class="pb-2">
                                    <h4><a href="#" title="Vai alla pagina: Seguici su">Seguici su</a></h4>
                                    <ul class="list-inline text-left social">
                                        <li class="list-inline-item">
                                            <a class="p-2 text-white" href="#" target="_blank">
                                                <svg class="icon icon-sm icon-white align-top">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-designers-italia"></use>
                                                </svg><span class="sr-only">Designers Italia</span>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="p-2 text-white" href="#" target="_blank">
                                                <svg class="icon icon-sm icon-white align-top">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-twitter"></use>
                                                </svg><span class="sr-only">Twitter</span>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="p-2 text-white" href="#" target="_blank">
                                                <svg class="icon icon-sm icon-white align-top">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-medium"></use>
                                                </svg><span class="sr-only">Medium</span>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a class="p-2 text-white" href="#" target="_blank">
                                                <svg class="icon icon-sm icon-white align-top">
                                                    <use xlink:href="{% static 'svg/sprites.svg' %}#it-behance"></use>
                                                </svg><span class="sr-only">Behance</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pb-2">
                                    <h4><a href="#" title="Vai alla pagina: Newsletter">Newsletter</a></h4>
                                    <p>Form Newsletter</p>
                                      <!--<form action="#" method="post">
                                        <label for="input-newsletter" class="active">Iscriviti per riceverla</label>
                                        <div class="input-group">
                                          <div class="input-group-prepend">
                                            <div class="input-group-text">@</div>
                                          </div>
                                          <input type="text" class="form-control" id="input-newsletter" name="input-newsletter" placeholder="Scrivi il tuo indirizzo email" >
                                          <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
                                          </div>
                                        </div>
                                        <button class="btn btn-default pull-right" type="submit">Iscriviti</button>
                                      </form>-->
                                </div>
                            </div>
                        </div>
                    </section>
                    {% endblock footer_contacts_section %}
                </div>
            </div>

            {% block footer_bottom %}
            <div class="it-footer-small-prints clearfix">
                <div class="container">
                    {% block footer_bottom_content %}
                    <h3 class="sr-only">Sezione Link Utili</h3>
                    <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
                        <li class="list-inline-item"><a href="#" title="Note Legali">Media policy</a></li>
                        <li class="list-inline-item"><a href="#" title="Note Legali">Note legali</a></li>
                        <li class="list-inline-item"><a href="#" title="Privacy-Cookies">Privacy policy</a></li>
                        <li class="list-inline-item"><a href="#" title="Mappa del sito">Mappa del sito</a> </li>
                    </ul>
                    {% endblock footer_bottom_content %}
                </div>
            </div>
            {% endblock footer_bottom %}
        </footer>
        {% endblock footer %}

        <script src="{% django_bootstrap_italia_static_path 'js/bootstrap-italia.bundle.min.js' %}"></script>

        {% block bottom_scripts %}{% endblock bottom_scripts %}
        {% block extra_scripts %}{% endblock extra_scripts %}
    </body>
</html>
