{% set layout = "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% if isDesktop() %}
    {% set layout = "ClarolineCoreBundle:Desktop:layout.html.twig" %}
    {% block breadcrumb %}
        {{
            macros.breadcrumbs([
                {
                    'icon': 'fa fa-briefcase',
                    'name': 'desktop'|trans({}, 'platform'),
                    'href': path('claro_desktop_open')
                },
                {
                    'name': 'bank_of_questions' | trans,
                    'href': path('ujm_question_index')
                },
                {
                    'name': 'correction' | trans,
                    'href': ''
                }
            ])
        }}
    {% endblock %}
{% else %}
    {% block resourceBreadcrumb %}
        <li><a href="{{ path('claro_resource_open', { 'resourceType': _resource.resourceNode.resourceType.name(), 'node': _resource.resourceNode.id }) }}">{{ _resource.getResourceNode().getName() }}</a></li>
        <li class="active">{{ 'bank_of_questions' | trans }}</li>
        {% endblock %}
    {% endif %}

{% extends layout %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/ujmexo/css/graphic.css') }}" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block title %} {{ 'correction' | trans }} {% endblock %}

{% block section_content %}

    <div class="panel-heading">
        <h3 class="panel-title">{{ 'correction' | trans }}</h3>
    </div>

    <div class="panel-body">
        {% if exoID == -1 %}
            <a href="{{ path('ujm_question_index') }}" class="btn btn-primary">
                <i class="fa fa-arrow-left"></i> {{ 'back_to_the_list' | trans }}
            </a>
        {% else %}
            <a class="btn btn-primary" href="{{ path('ujm_exercise_questions', { 'id': exoID }) }}">
                <i class="fa fa-arrow-left"></i> {{ 'back' | trans }}
            </a>
        {% endif %}
    </div>

    <div class="list-group">
        <div class="list-group-item">

            {% set inter = interG %}
            {% include "UJMExoBundle:Partial:correction/graphic.html.twig" %}              
            <div id="Answer" style="position: relative;">
                <img class="AnswerImage" src="{{asset (doc.url)}}" width="{{ interG.width }}" height="{{ interG.height }}"
                     alt="AnswerImage" id="AnswerImage1"/>

                {% set i = 0 %}{% set allInfo = '' %}{% set allInfoTab = '' %}

                {% for c in coords %}

                    {% set numb = coords[i].value|split(',') %}
                    {% set respcoo = rep[i]|split('-') %}
        
                    <img src="{{ asset('bundles/ujmexo/images/graphic/circleblack.png') }}" style="width:20px;" alt="RightAnswer{{i}}" id="1ra{{i}}"
                         style="z-index: 2;"/><p id="idra{{i}}" style="position: absolute; left: 5px; top: -20px;">{{i+1}}</p>
                    
                    <img src="{{ asset('bundles/ujmexo/images/graphic/answer.png') }}" alt="AnswerZone{{i}}" id="1cursor{{i}}"
                         style="z-index: 7;"/>

                    {% set allInfo = coords[i].shape~';'~coords[i].color~';'~asset('bundles/ujmexo/images/graphic/')~';'
                        ~numb[0]~';'~numb[1]~';'~respcoo[0]~';'~respcoo[1]~';'~coords[i].size~'^'~allInfo %}
                    
                    {% set allInfoTab = coords[i].scoreCoords~';§'~coords[i].feedback~'^^'~allInfoTab %}
                    {% set i = i + 1 %}
                    
                {% endfor %}
            </div>
            <br>
             <table id="tableAnswer" class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr style="background-color: lightsteelblue;">
                        <th class="classic">{{ 'answer_zone' | trans }}</th>
                        <th class="classic">{{ 'points' | trans }}</th>
                        <th class="classic">{{ 'comment' | trans }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <hr>

            {% set score = score ~ ' / ' ~ total %}
            {% include "UJMExoBundle:Partial:correction/overviewScore.html.twig" %}

        </div>
    </div>
    <input type="hidden" id="info" name="info" value="{{i}}~{{allInfo}}"/>
    <input type="hidden" id="infotab" name="infotab" value="{{i}}~{{allInfoTab}}">
    <script type="text/javascript" src="{{ asset('bundles/ujmexo/js/graphicOverview.js') }}"></script>
{% endblock %}