{% extends "bootstrap/base.html" %}
{% block title %} Chowlk {% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" >
{% endblock %}

{% block content %}

<header>
    <a href="{{url_for('home')}}"><img id="logo" src="{{ url_for('static', filename='resources/logo.png') }}"></a>
    <button type="button" onclick="window.location.href='https://chowlk.linkeddata.es/chowlk_spec'" class="btn btn-primary btn-md">Chowlk Notation</button>
</header>
<div class="container-fluid" id="banner">
    <div class="jumbotron">
        <h1 class="display-4 text-center">Chowlk Code Generation Service</h1>
        <hr class="my-4">
        <p class="lead text-center">Chowlk is a web service that automatically generates the OWL code from your Ontology 
            Diagram made with <a href="https://www.diagrams.net/">diagrams.net</a>
        </p>
    </div>
</div>


<div class="container" id="main-container">
    {% if ttl_data %}
        <h3><b>Conversion Successful!</b></h3>
    {% else %}
        <h3>Error Message</h3>
        <p>Please follow the notation provided at <a href="https://chowlk.linkeddata.es/chowlk_spec">Chowlk Visual Notation</a>.<br>
    {% endif %}
    {% if namespaces %}
        <div>
            <h4><b>Namespaces</b></h4>
            <p>
                The following namespaces were found in the ontology but not in the namespace declaration block.<br>
                We created the following namespaces for you, please check them:
            </p>

            {% for namespace in namespaces %}
                <ul>
                    <li><b>{{ namespace }}: </b>{{ namespaces[namespace] }}</li>
                </ul>
            {% endfor %}
        </div>
    {% endif %}

    {% if errors %}
    <div>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            {% for error in errors %}
                {% if errors[error] %}
                    {% if loop.index == 1 %}
                        <h4><b>Errors</b></h4>
                    {% endif %}

                    {% if error == 'Syntax' %}
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="heading{{loop.index}}">
                                <h5 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{loop.index}}" aria-expanded="false" aria-controls="collapseTwo">
                                        {{error}}
                                    </a>
                                </h5>
                            </div>
                            <div id="collapse{{loop.index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{loop.index}}">
                                <div class="panel-body">
                                    <b>Message:</b>{{errors[error]["message"]}}
                                </div>
                            </div>
                        </div>

                    {% else %}

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="heading{{loop.index}}">
                                <h5 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{loop.index}}" aria-expanded="false" aria-controls="collapseTwo">
                                        {{error}}
                                    </a>
                                </h5>
                            </div>
                            <div id="collapse{{loop.index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{loop.index}}">
                                <div class="panel-body">
                                    <ul>
                                        {% for shape in errors[error] %}
                                            <li>
                                                <b>Value: </b>{{shape["value"]}}, <b>Problem: </b>{{shape["message"]}}, <b>Shape id: </b>{{shape["shape_id"]}}
                                            </li>
                                        
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if ttl_data %}
    <div class="row">
        <div class="container col-xs-6">
            <h3>Code in TTL:</h3>
            <div id="output-container">
                {% for line in ttl_data %}
                    <p class="ttl-line">{{line}}</p>
                {% endfor %}
            </div>
            <a class="btn btn-primary" href="{{url_for('download', format='ttl')}}">Download</a>
        </div>

        <div class="container col-xs-6">
            <h3>Code in RDF/XML:</h3>
            <div id="output-container">
                {% for line in xml_data %}
                    <p class="ttl-line">{{line}}</p>
                {% endfor %}
            </div>
            <a class="btn btn-primary" href="{{url_for('download', format='xml')}}">Download</a>
        </div>
    </div>

    {% endif %}
</div>


{% endblock %}