base_annotation.html

{% extends "base.html" %}
{% load static i18n %}


{% block page_head %}{% endblock %}

{% block navbar_right_content %}

    {% block navbar_image_mgmt %}
    <li class="nav-item">
        <form class="form-inline fileinput-button" style="margin-top: 5px;margin-right: 5px;">
            <button class="btn btn-success btn-sm" type="button">
                <i class="fas fa-plus"></i> Nouvelle image
            </button>
            <form action="{% url "adim.app:upload_file" %}" method="post" enctype="multipart/form-data" >{% csrf_token %}
                <input id="fileupload-alt" type="file" name="image_file" data-url="{% url "adim.app:upload_file" %}" accept="image/png,image/jpg,image/jpeg">
            </form>
        </form>
    </li>
    <li class="nav-item" style="margin-right: 10px;">
        <a href="#" id="aom-show-but" class="nav-link aom-show-but">
            <i class="fa fa-th"></i>
            Mes Images
        </a>
    </li>
    {% endblock navbar_image_mgmt %}

    {{ block.super }}

    <li class="nav-item info">
        <a href="#" id="adim-about-but" class="nav-link"><i class="fas fa-info-circle"></i>&nbsp;</a>
    </li>

{% endblock navbar_right_content %}



{#{% block overlay %}#}
{#<div id="page-loader">#}
{#    <div class="text-muted lead">Chargement...</div>#}
{#</div>#}
{#{% endblock %}#}

{#==========================================#}
{#   MODALS                                 #}
{#==========================================#}
{% block modals %}
{#  -- Loading Status -- #}
    <div class="modal" id="adim-fu-alt-status" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nouvelle image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="progress-wrapper" style="display: none;">
                        <p>Chargement d'une nouvelle image:</p>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 0%;">
                                0%
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-danger adim-fu-error-box" style="display: none;">
                        <strong>Impossible de charger l'image.</strong>

                        <div class="adim-fu-error-maxFileSize" style="display: none;">
                            Ce fichier est trop volumineux, la taille maximale acceptée est 2Mb.
                        </div>
                        <div class="adim-fu-error-acceptFileTypes" style="display: none;">
                            Ce type de document ne peut pas être chargé. Seules les images de type PNG
                            (<code>.png</code>)
                            ou JPG (.jpg, .jpeg) sont accéptées.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{#  -- AnObj Manager Dlog -- #}
    {% include "adim/aom-modal.inc.html" %}

{#  -- SVG export Info -- #}
    <div class="modal" id="dlg-export-svg-info" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Exportation en cours...</h4>
                </div>
                <div class="modal-body">
                    <p>La génération du svg peut prendre un peu de temps, soyez patient.</p>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>

{# -- Annotation Publishing Mode -- #}
    <div class="modal" id="dlg-publish-mode" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Publier vos annotations</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Choisissez le mode de publication de vos annotations ce qui déterminera qui poura les voir.</p>

                    <form onsubmit="return false">
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="0" type="radio"/>
                                <span class="fa fa-home"></span>
                                <strong>privé</strong>
                                <span class="form-text">Les annotations sont accessibles pour vous seulement.</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="1" type="radio"/>
                                <span class="fa fa-user"></span>
                                <strong>propriétaire</strong>
                                <span class="form-text">Les annotations peuvent être vues par le/la propriétaire de l'image uniquement.
                                {% if anobj %}Pour cette image il s'agit de: <strong>«{{ anobj.owner }}»</strong> {% endif %}
                                </span>
                            </label>
                        </div>
                        {% if anobj.allow_public_publishing or is_owner %}
                        <div class="radio">
                            <label>
                                <input name="publish-mode" value="2" type="radio"/>
                                <span class="fa fa-users"></span>
                                <strong>public</strong>
                                <span class="form-text">
                                    Les annotations peuvent être vues par toutes les personnes qui ont un accès à l'image.
                                {% if not is_owner %}Pour connaitre précisément la liste de ces personnes,
                                    addressez vous à la/le propriétaire de l'image.{% endif %}
                                </span>
                            </label>
                        </div>
                        {% endif %}
                    </form>
                    
                    <p>Le mode de publication concerne l'ensemble de vos annotations, y compris celles qui seront éventuellement ajoutées par la suite.</p>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary save-publish-mode-but" >Enregistrer</button>
                </div>
            </div>
        </div>
    </div>

{#  -- About Dlg -- #}
    {% include "adim/_about-modal.inc.html" %}


{% endblock modals %}


{#==========================================#}
{#   JS TEMPLATES                           #}
{#==========================================#}
{% block js_templates %}
{% url "adim.app:annotate-new" as annotate_url %}
{# -- AnObjMgr list-item view -- #}
<script type="text/template" id="aom-list-item">
    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group" role="group" aria-label="First group">
    <% switch(true) { case 0 < sharing_mode && sharing_mode < 16: %><span class="fas fa-share-alt text-success aom-item-sh-status" title="Partagé"></span><% break %>
        <% case sharing_mode == 16: %><span class="adim-icon-ttp-moodle text-success aom-item-sh-status" title="Partagé via moodle"></span><% break %>
        <% case sharing_mode == 32: %><span class="fa fa-coffee text-success aom-item-sh-status" title="Partagé via yin-zhen"></span><% break %>
        <% case sharing_mode > 0: %><span class="fa fa-cloud text-success aom-item-sh-status" title="Partagé via service externe"></span>
    <% } %>

        <% if (locked) { %><span class="glyphicon glyphicon-lock" title="Vérouillé"></span><% } %>
          </div>
          <div class="btn-group" role="group">
              <% if (owned && !ttpShared) { %><button class="close" title="Supprimer l'image">
                <span class="far fa-times-circle"></span>
            </button><% } %>
          </div>
    </div>

    <a href="{{ annotate_url }}<%= uuid %>/" title="Editer l'image">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             style="background-image: url({{ annotate_url }}<%= uuid %>/thumb/?nc=<%= nc || 1 %>);">
        <span class="name"><%= name %></span>
    </a>
</script>
{# -- AnObjMgr list item's info popover #}
<script type="text/template" id="aom-list-item-popup-content">
    <dl class="dl-horizontal">
        <dt>{% trans "Modifié le" %} :</dt>
        <dd>(last modif date)</dd>
        <dt>{% trans "Annotations" %} :</dt>
        <dd><%= annotations.length %></dd>
    </dl>
</script>
{% endblock js_templates %}


{% block inline_script %}
<script>
{# ===== Theme Manager ===== #}
var t = localStorage.getItem("adimTheme") || 'dark';
if (t === "light") {
    var n = document.getElementById("main-navbar"), c = "class";
    n.setAttribute(c, n.getAttribute(c).replace("navbar-inverse", "navbar-default"));
    try { for (var i=0,b;b=n.getElementsByTagName("button")[i];i++)
            b.setAttribute(c, b.getAttribute(c).replace("btn-adim-dark", "btn-secondary"))
    } catch(e) {}
}
</script>
{% endblock %}

{% block content_js %}
    {{ block.super }}
{% endblock %}

{#==========================================#}
{#   MAIN CONTAINER                         #}
{#==========================================#}
{%  block main_container %}
<div class="container-fluid {% if display_shared_annotations %}has-mod-nav{% endif %} {{ adim_env|default:"" }}" id="main">

    <div class="row tool-top-row">
        {% block tool-top-row %}
        <div class="">
        {% if display_shared_annotations %}
            <ul class="nav nav-tabs adim-view-mod-tabs" role="tablist">
                <li class="nav-item active">
                    <a class="nav-link" href="#!annoter"href="#!annoter" role="tab" data-adim-mode="edit" data-toggle="tooltip" title="Ajouter et modifier vos annotations">
                        <span class="fa fa-edit"></span> Annoter
                    </a>
                </li>
                {% if display_shared_annotations %}
                <li class="nav-item">
                    <a class="nav-link" href="#!afficher" role="tab" data-adim-mode="review" data-toggle="tooltip" title="Afficher les annotations partagées des autres membres">
                        <span class="fa fa-eye"></span> Annotations partagées
                    </a>
                </li>
                {% endif %}
            </ul>
        {% endif %}
        </div>
        {% endblock tool-top-row %}
    </div>

    {% block adim-view %}
    <div class="d-flex adim-view adim-view-edit flex-row">
        <div class="p-1 pr-3" id="tools-col">
            <div class="btn-toolbar" role="toolbar" id="draw-tool-tb">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                {% block draw-tool-tb %}
                    <label class="btn btn-lg btn-primary active" title="Selection (A)">
                        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select" autocomplete="off" checked>
                        <span class="fa fa-mouse-pointer"></span><span class="tool-text"> Select</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
                        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan" autocomplete="off">
                        <span class="fa fa-hand-paper"></span><span class="tool-text"> Pan</span>
                    </label>

                    <label class="btn btn-lg btn-primary" title="Dessin libre (D)">
                        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing" autocomplete="off">
                        <span class="fa fa-pencil-alt" data-fa-transform="flip-h"></span><span class="tool-text"> Dessin</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Lignes (L)">
                        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines" autocomplete="off">
                        <span class="fas fa-minus"></span><span class="tool-text"> Lignes</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Cercle (C)">
                        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse" autocomplete="off">
                        <span class="far fa-circle"></span><span class="tool-text"> Cercle</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
                        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle" autocomplete="off">
                        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Flèche (F)">
                        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow" autocomplete="off">
                        <span class="fa fa-arrow-right"></span><span class="tool-text"> Flèche</span>
                    </label>
                    <label class="btn btn-lg btn-primary" title="Texte (T)">
                        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text" autocomplete="off">
                        <span class="fa fa-font"></span><span class="tool-text"> Texte</span>
                    </label>
                {% endblock draw-tool-tb %}
                </div>
            </div>
            <span class="tool-sep">&nbsp;</span>
            <div class="btn-toolbar" role="toolbar" id="param-tool-tb">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                {% block param-tool-tb %}

                      <div class="btn-group" id="tool-colorselect" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-light tinter dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        data-attr-name="color" title="Choix de la couleur">
                          <span class="adim-icon-color"></span>
                        </button>
                        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
                          <a class="dropdown-item c1" href="#"></a>
                          <a class="dropdown-item c2" href="#"></a>
                          <a class="dropdown-item c3" href="#"></a>
                          <a class="dropdown-item c4" href="#"></a>
                          <a class="dropdown-item c5" href="#"></a>
                          <a class="dropdown-item c6" href="#"></a>
                          <a class="dropdown-item cx picker" href="#" data-color="rgb(128, 23, 212)"
                             data-color-format="rgb" style="background-color: rgb(128, 23, 212)" style="left:50px;">
                          </a>
                        </div>
                      </div>

                    <button type="button" class="btn btn-light" id="tool-fill-color" title="Contours / plein"
                            data-toggle="button" data-attr-name="fill" >
                        <span class="tool-fill-on" style="display: none;"><i class="fa fa-square"></i></span>
                        <span class="tool-fill-off"><i class="far fa-square"></i></span>
                        <span class="tool-text">Plein</span>
                    </button>

                    <button class="btn btn-light" id="attr-font" type="button" title="Taille des caractères">
                        <span class="fa fa-text-height"></span>
                    </button>

                    <div class="sldr btn btn-light" id="attr-size-slider">
                        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
                        <input type="text" class="slider" value="7" autocomplete="off"
                               data-attr-name="size">
                    </div>

                    <div class="sldr btn btn-light" id="attr-opacity-slider">
{#                        <div class="small tool-title" title="Opacité">Opacité</div>#}
                        <span class="adim-icon-opacity" title="Opacité"></span>
                        <input type="text" class="slider" value="100" autocomplete="off"
                               data-attr-name="opacity">
                    </div>

                    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
                            title="Mettre au premier plan. shift-click: avancer de un niveau">
                        <i class="material-icons">flip_to_front</i>
                    </button>

                    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
                            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
                        <i class="material-icons">flip_to_back</i>
                    </button>
                {% endblock param-tool-tb %}
                </div>

            </div>

        </div>

        <div class="p-1 pr-3 w-100" id="canvas-col">
            <div class="canvas-container card">
                <canvas id="my-canvas" width="480" height="360" resize></canvas>
                {% block canvas_content %}{% endblock %}
            </div>

            <div id="canvas-bbar">

                <div id="attr-zoom" class="toolbar-control">
                    <label>Zoom: &nbsp;</label>
                    <div class="input-group">
                        <input type="text" size="3" class="form-control" name="zoomLevel">
                        <span class="input-group-addon btn" style="border-left:none" title="Zoom 100%" id="but-zoom-100">
                            <small>1:1</small>
                        </span>
                        <span class="input-group-addon btn" title="Zoom pour afficher toute l'image" id="but-zoom-fit">
                            <span class="material-icons">photo_size_select_large</span>
                        </span>
                    </div>
                    <div class="sldr float-left">
                        <input type="text" class="slider" value="100" data-attr-name="zoom" autocomplete="off"
                               data-slider-min="10" data-slider-max="800" data-slider-value="100">
                    </div>
                </div>

                <div class="tb-sep"></div>
{% comment %}
                <div id="img-opacity" class="toolbar-control">
                    <label>Opacité image: &nbsp;</label>
                    <div class="input-group">
                        <input type="text" size="3" class="form-control" name="imageOpacity">
                    </div>
                    <div class="sldr float-left">
                        <input type="text" class="slider" value="100" data-attr-name="imgopacity" autocomplete="off"
                               data-slider-min="0" data-slider-max="100" data-slider-value="100">
                    </div>
                </div>
{% endcomment %}
{% comment %}
                <div id="img-opacity" class="toolbar-control">
                    <label title="Opacité de l'image">Image:  &nbsp</label>
                    <div class="sldr" id="attr-imgopacity-slider" >
                        <input type="text" class="slider" value="100" autocomplete="off"
                               data-attr-name="imgopacity" data-slider-min="0" data-slider-max="100" />
                    </div>
                </div>
{% endcomment %}
            </div>
        </div>

        <div class="p-1 ml-auto default" id="side-col">
            <div class="side-col-collapse-but">
              <button class="btn btn-sm btn-block btn-defaultX" type="button" data-toggle="collapse" data-target="#side-col-collapse-content" aria-expanded="false">
                  <i class="fas fa-chevron-circle-right float-left"></i>
              </button>
            </div>
            <div class="row collapse width show" id="side-col-collapse-content">
                <div class="container">
            {% comment %}{% if mode == 'edit' %}
                <div class="row"><div class="col-xs-10 col-xs-offset-2">
                    <div class="btn-group">
                        <button class="btn btn-sm btn-primary" id="save-but" type="button">
                            <span class="glyphicon glyphicon-save"></span>
                            Enregistrer
                        </button>

                        <button class="btn btn-sm btn-primary" type="button" id="autosave-but" title="Enregistrement automatique">
                            <span class="glyphicon glyphicon glyphicon-repeat"></span>
                        </button>
                    </div>
                </div></div>
                <div class="row">&nbsp;</div>
                {%  endif %}{% endcomment %}
                <div class="d-flex">
                {% block alt-side-col-panel-group %}
                {% comment %}
                    To use the alternative side panel, override this block template and
                    define the panel-group like this:
                        <div id="alt-side-col-panel-group" class="p-1 panel-group" style="margin-right:0;padding-right:0">
                        ( panels definition goes here ... )
                        </div>
                {% endcomment %}
                {% endblock alt-side-col-panel-group %}

                <div class="p-1 w-100" id="side-col-panel-group">
                {% block side-col-panel-group %}
                    {#  ----- Annotation Sharing Panel ----- #}
                    {% block publication-panel %}
                    {% if membership %}

                    <div id="annotation-sharing-panel" data-publish-state="{{ membership.publish_mode }}">
                        <a data-toggle="collapse" href="#annotationSharingPanel" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
                                role="button" aria-expanded="false" aria-controls="annotationSharingPanel">
                            <div>
                                Publication
                                <span class="publishStatus">
                                    <span class="badge badge-default" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="0"
                                          title="Les annotations ne sont visibles que par vous.">
                                        <span class="fa fa-home"></span>
                                    </span>
                                    <span class="badge badge-warning" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="1"
                                          title="Les annotations sont visibles par le propriétaire de l'image">
                                        <span class="fa fa-user"></span>
                                    </span>
                                    <span class="badge badge-warning" style="display: none;"
                                          data-toggle="tooltip" data-publish-mode="2"
                                          title="Les annotations sont visibles pour tous les membres de cette image">
                                        <span class="fa fa-users"></span>
                                    </span>
                                </span>
                            </div>
                            <i class="fas fa-chevron-circle-down ml-auto"></i>
                        </a>
                        <div id="annotationSharingPanel" class="panel-dark collapse {{ collapsed|yesno:",in" }}">
                            <div class="card card-body">
                              <div class="card-text" id="annotation-sharing-container">
                                    <label class="col-form-label">Visible pour&hairsp;:</label>
                                    <span class="sha-publish-mode-state" >
                                        <span class="badge badge-default" style="display: none;"
                                              data-toggle="tooltip" data-publish-mode="0"
                                              title="Les annotations ne sont visibles que par vous.">
                                            <span class="fa fa-home"></span> privé
                                        </span>
                                        <span class="badge badge-warning" style="display: none;"
                                              data-toggle="tooltip" data-publish-mode="1"
                                              title="Les annotations sont visibles par le propriétaire de l'image">
                                            <span class="fa fa-user"></span> propriétaire
                                        </span>
                                        <span class="badge badge-warning" style="display: none;"
                                              data-toggle="tooltip" data-publish-mode="2"
                                              title="Les annotations sont visibles pour tous les membres de cette image">
                                            <span class="fa fa-users"></span> public
                                        </span>
                                    </span>
                              </div>
                                <button type="button" class="btn btn-sm btn-light btn-block adim-sha-publish-mode-but">
                                    Publier les annotations...
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% endblock publication-panel %}

                    {# ----- Property Panel ----- #}
                    {% block property-panel %}
                        <div id="annotation-property-panel">
                            <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseProperties" role="button"
                               aria-expanded="false" aria-controls="collapseProperties">
                                <div>Propriétés</div>
                                <i class="fas fa-chevron-circle-up ml-auto"></i>
                            </a>

                            <div class="collapse show panel-dark" id="collapseProperties">
                                <div class="card card-body">
                                  <div class="card-text" id="annotation-property-container">
                                {% block property-panel-content %}
                                    <div class="property-group comment-prop">
                                        <label class="col-form-label">Commentaire&hairsp;:</label>
                                        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
                                    </div>
                                {% endblock property-panel-content %}
                                  </div>
                                </div>
                            </div>
                        </div>
                    {% endblock property-panel %}

                    {# ----- Members Panel ----- #}
                    {% block members-panel %}
                    {% if display_shared_annotations %}
                    <div id="annotation-list-panel">
                        <a data-toggle="collapse" href="#collapseUsers" class="{{ collapsed|yesno:"collapsed," }} btn btn-secondary btn-sm btn-block d-inline-flex"
                                role="button" aria-expanded="false" aria-controls="collapseUsers">
                            <div>Utilisateurs</div>
                            <i class="fas fa-chevron-circle-up ml-auto"></i>
                        </a>
                        <div id="collapseUsers" class="collapse show panel-dark">
                            <div class="card card-body">
                                <div class="panel-tb" role="toolbar" style="padding:0 2px 5px">
                                    <div class="btn-group">
                                        <button id="btn-layers-hideall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout masquer">
                                            <span class="fa fa-eye-slash"></span>
                                        </button>
                                        <button id="btn-layers-showall" class="btn btn-sm btn-adim-layertb" type="button" title="Tout afficher">
                                            <span class="fa fa-eye"></span>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button id="btn-layers-hidenames" class="btn btn-sm btn-adim-layertb {{ hidenames|yesno:"active," }}" type="button" title="Masquer/afficher les noms">
                                            <i class="fas fa-user-secret"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button id="btn-layers-next" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats suivant">
                                            <span class="fa fa-caret-down"></span>
                                        </button>
                                        <button id="btn-layers-prev" class="btn btn-sm btn-adim-layertb" type="button" title="Afficher résultats précédant">
                                            <span class="fa fa-caret-up"></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="card card-body collapse {{ collapsed|yesno:",in" }}" id="annotation-list-container" style="padding: 0;">
                                    <ul class="list-group"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% endblock members-panel %}

                {% endblock side-col-panel-group %}
                </div>
            </div></div></div>
        </div>
    </div>
    {% endblock adim-view %}
</div>




{%  endblock main_container %}