{% extends "admin.html" %}
{% load i18n %}
{% block extra_admin_head %}
    <link href="/static/css/joint.css" rel="stylesheet"/>
    <script src="/static/js/lodash.js"></script>
    <script src="/static/js/backbone.js"></script>
    <script src="/static/js/joint.js"></script>
    <style>
        ol {
            padding-left: 20px;
        }

        ol li {
            list-style-type: decimal;
        }

        ol {
            counter-reset: item;
        }

        ol > li {
            counter-increment: item;
        }

        ol ol > li {
            display: block;
        }

        ol ol > li:before {
            content: counters(item, ".") ". ";
            margin-left: -20px;
        }
    </style>
{% endblock %}
{% block body %}
    <body id="body" style="background-color: white">
    <div class="padding-md">
        <h1>{% trans "Documentation" %}</h1>
        <p>{% trans "This document describes the actors and funcionalities of the system" %} {{ settings.initials }}.</p>

        <h2>Índice</h2>
        <table>
            <tbody>
            <ol>
                {% if documentation.actors %}
                    <li>Atores
                        <ol>
                            {% for actor in documentation.actors %}
                                <li><a href="#actors">{{ actor.name }}</a></li>
                            {% endfor %}
                        </ol>
                    </li>
                {% endif %}
                {% if documentation.workflow %}
                    <li><a href="#fluxograma">Fluxograma</a></li>
                {% endif %}
                {% if documentation.class_diagrams %}
                    <li>Diagrama de Classes
                        <ol>
                            {% for class_diagram in documentation.class_diagrams %}
                                <li><a href="#diagram-{{ class_diagram.name|slugify }}">{{ class_diagram.name }}</a>
                                </li>
                            {% endfor %}
                        </ol>
                    </li>
                {% endif %}
                {% if documentation.usecases %}
                    <li>Casos de Uso
                        <ol>
                            {% for usecase in documentation.usecases %}
                                <li>
                                    <a href="javascript:$('#{{ usecase.name|slugify }}tab').tab('show');$('html, body').animate({scrollTop: $('#{{ usecase.name|slugify }}tab').offset().top }, 2000);">{{ usecase.name }}</a>
                                </li>
                            {% endfor %}
                        </ol>
                    </li>
                {% endif %}
            </ol>
            </tbody>
        </table>



        {% if documentation.description %}
            <p>{{ documentation.description|linebreaks }}</p>
        {% endif %}

        <h3 id="actors">{% trans "Actors" %}</h3>
        {% if documentation.actors %}
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>{% trans "Group" %}</th>
                    <th>{% trans "Description" %}</th>
                    {% if documentation.organization_name %}
                        <th>{% trans "Scope" %}</th>
                    {% endif %}
                </tr>
                </thead>
                <tbody>
                {% for actor in documentation.actors %}
                    <tr>
                        <td width="30%" align="center">
                            <img width="50px" src="/static/images/actor.png"/><br/>
                            {{ actor.name }}
                        </td>
                        <td>{{ actor.description|format }}</td>
                        {% if documentation.organization_name %}
                            <td>{{ actor.scope }}</td>
                        {% endif %}
                    </tr>
                    {% empty %}
                    {% trans "Superuser" %}
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="alert alert-warning">Nenhum ator envolvido.</div>
        {% endif %}

        <h3 id="fluxograma">Fluxograma</h3>
        {% if workflow_data != '[]' %}
            <div id="workflow"></div>
            <script src="/static/js/workflow.js"></script>
            <script>
                workflow('workflow', {{ workflow_data|safe }});
            </script>
        {% else %}
            <div class="alert alert-warning">Nenhum fluxo foi definido.</div>
        {% endif %}

        {% if documentation.class_diagrams %}
            <h3>Diagrama de Classes</h3>
            <script src="/static/js/classes.js"></script>
            {% for class_diagram in documentation.class_diagrams %}
                <h4 align="center" id="diagram-{{ class_diagram.name|slugify }}">{{ class_diagram.name }}</h4>
                <div id="class-diagram{{ class_diagram.name|slugify }}"></div>
                <script>
                    classDiagram('class-diagram{{ class_diagram.name|slugify }}', {{ class_diagram.as_json|safe }});
                </script>
            {% endfor %}
        {% endif %}

        <h3>{% trans "Use Cases" %}</h3>

        <ul class="nav nav-tabs" role="tablist">
            {% for usecase in documentation.usecases %}
                <li class="nav-item {% if forloop.first %}active{% endif %}">
                    <a class="nav-link" data-toggle="tab" id="{{ usecase.name|slugify }}tab"
                       href="#{{ usecase.name|slugify }}" role="tab">{{ usecase.name }}</a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content">
            {% for usecase in documentation.usecases %}
                <div class="tab-pane {% if forloop.first %}active{% endif %}" id="{{ usecase.name|slugify }}"
                     role="tabpanel">
                    <h5>UC-{{ usecase.name|slugify|upper }}</h5>
                    <table class="table table-striped table-bordered table-hover">
                        <tbody>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap" width="20%">ID:</td>
                            <td width="80%">UC-{{ usecase.name|slugify|upper }}</td>
                        </tr>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Title" %}:</td>
                            <td>{{ usecase.name }}</td>
                        </tr>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Description" %}:</td>
                            <td>{{ usecase.description|format }}</td>
                        </tr>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Primary Actor" %}:</td>
                            <td>{% for actor in usecase.actors %}{% if forloop.first %}{{ actor|format }}
                            {% endif %}{% endfor %}</td>
                        </tr>
                        {% if usecase.actors|length > 1 %}
                            <tr>
                                <td align="right" valign="middle" nowrap="nowrap">{% trans "Secondary Actors" %}:</td>
                                <td>{% for actor in usecase.actors %}{% if not forloop.first %}{{ actor|format }}
                                {% endif %}{% endfor %}</td>
                            </tr>
                        {% endif %}
                        {% if usecase.pre_conditions %}
                            <tr>
                                <td align="right" valign="middle" nowrap="nowrap">{% trans "Preconditions" %}:</td>
                                <td>{% for pre_condition in usecase.pre_conditions %}
                                    {{ pre_condition }}{% endfor %}</td>
                            </tr>
                        {% endif %}
                        {% if usecase.business_rules %}
                            <tr>
                                <td align="right" valign="middle" nowrap="nowrap">{% trans "Business Rules" %}:</td>
                                <td>{{ usecase.business_rules|ordered_list }}</td>
                            </tr>
                        {% endif %}
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Postconditions" %}:</td>
                            <td>{{ usecase.post_condition|format }}</td>
                        </tr>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Main Scenario" %}:
                            </td>
                            <td>
                                {{ usecase.get_interactions_as_string|print_format }}
                        </tr>
                        <tr>
                            <td align="right" valign="middle" nowrap="nowrap">{% trans "Extensions" %}:</td>
                            <td>
                                <!--
                                2a. Fluxo alternativo para o passo 2.<br>
                                — 2a1. Passo 2a1 <br>
                                — 2a2. Passo 2a2
                                -->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    </div>
    <a href="" id="scroll-to-top" class="hidden-print"><i class="fa fa-chevron-up"></i></a>
    </body>
    <script>
        $("#x").click(function () {
            $('html, body').animate({
                scrollTop: $("#actors").offset().top
            }, 2000);
        });
    </script>
{% endblock %}