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

{% block page_head %}{% endblock %}

{% block body_class %}home{% endblock %}

{% block navbar_right_content %}
    {{ block.super }}
    <li>
        <p class="navbar-text">&nbsp;&nbsp;&nbsp;</p>
    </li>
{% endblock %}


{% block main_content %}
<div id="home-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <h1>ADIM &nbsp;&nbsp;<small>Un outil d'annotation d'images pour l'enseignement</small></h1>
            </div>
            <div class="col-sm-3" id="home-action-box">
                <div class="well well-sm">
                {% if user.is_anonymous %}
                    {% include "adim/login.inc.html" %}
                {% else %}
                    <a href="{% url "adim.app:annotate-new" %}"
                       class="btn btn-lg btn-success btn-block">
                        <span class="glyphicon glyphicon-pencil"></span>&nbsp;
                        Annoter &blacktriangleright;
                    </a>
                {% endif %}
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div id="home-image">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
                </div>
            </div>
        </div>
        <div class="row">
            <div id="home-content">
                <div class="col-sm-6">
                    <p>
                        L'analyse d'images ou de représentations par l’annotation permet des types d'activités d'enseignement
                        très variés comme une simple analyse documentée jusqu'à la résolution de problème complet.
                    </p>
                    <p>ADIM est un environnement global et flexible d'étude d'images qui rend possible ces types
                        d’activités d’enseignement ou de recherche.
                    </p>
                </div>
            <div class="col-sm-6">
                <h5>Le scénario pédagogique en 4 étapes</h5>

                <dl>
                    <dt>1. Créer et proposer une activité d’annotation</dt>
                    <dd>Elle peut se faire via les options de partage du système ADIM ou par une activité Moodle
                        associée.
                    </dd>

                    <dt>2. Période de travail individuel d’annotation</dt>
                    <dd>Les participants réalisent leur travail d’annotation selon les consignes données et partagent
                        leurs annotions à la fin de leur travail.
                    </dd>

                    <dt>3. Comparaison et analyse des résulats</dt>
                    <dd>L’enseignant, ou directement les participants selon le scénario choisi, peut comparer les
                        résultats des participants regroupés sous la forme de calques séparés dans l’interface.
                    </dd>

                    <dt>4. Elaboration d’un feedback constructif pour une discussion</dt>
                </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="main-footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
            </div>
            <div class="col-sm-4">
                <ul class="list-unstyled small about-links">
                    <li><a href="#contacts"  data-tab="#adim-about-body-contacts">
                        <span class="glyphicon glyphicon-envelope"></span>&nbsp;
                        Contacts</a></li>
                    <li><a href="#credits" data-tab="#adim-about-body-credits">
                        <span class="glyphicon glyphicon-glass"></span>&nbsp;
                        Credits
                    </a></li>
                    <li><a href="#info_legale" data-tab="#adim-about-body-legal">
                        <span class="glyphicon glyphicon-briefcase"></span>&nbsp;
                        Informations légale
                    </a></li>
                </ul>
            </div>
            <div class="col-sm-4">
                <p class="text-right small">© 2015 Unil &mdash; <a href="http://www.unil.ch/">Université de Lausanne</a></p>
            </div>
        </div>
    </div>
</div>

{#    <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#}

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

{% endblock main_content %}

{% block main_container %}{% endblock %}

{% block content_js %}
    {{ block.super }}
    <script src="{% static "js/libs/jquery.min.js" %}"></script>
    <script src="{% static "js/libs/bootstrap.min.js" %}"></script>

    <script>
    (function($){
        // Display About Dlg when info link in footer are clicked. Select corresponding tab in the modal dlg
        $(function(){
            var aboutDlgTabList = $("#dlg-about-adim").find("ul[role=tablist]");
            $("#main-footer").find(".about-links a").on('click', function(evt){
                evt.preventDefault();
                $("#dlg-about-adim").modal();
                var tabTgt = $(evt.target).data('tab'),
                    tabEl = aboutDlgTabList.find("[href=" + tabTgt + "]");
                tabEl.tab('show');
            });
        });
    })(jQuery);
    </script>

{% comment %}    {% if user.is_anonymous %}<script>
    if (document.location.search.match(/next=/)) {
        $.get("{% url "shib-display" %}")
            .fail(function(){ })
            .done(function(){
                document.location.assign("{% url "shib-login" %}" + document.location.search);
            });
    }
    </script>
    {% endif %}{% endcomment %}

{#    <script src="{% static "js/libs/require.min.js" %}" data-main="{% static "js/su_app" %}"></script>#}
{% endblock %}