{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}
      Výsledek porovnání
  {% endblock %}</h1>
{% endblock %}

{% block content %}
  <br>
  <div style="text-align:center"><h2>Celkový výsledek:
      {% if ok %} správné řešení.
      {% else %} nesprávné řešení.
      {% endif %} </h2><br>

      {% if alphabets != "" %}<b>{{ alphabets }}</b><br><br>{% endif %}

      {% if task_solved == "" %}
          Odpověď splňuje požadavky kladené na formalismus.
      {% else %}
      Odpověď <b>nesplňuje požadavky</b> kladené na formalismus. {{ task_solved }}
      {% endif %}<br>

      {% if extra_word_ce or missing_word_ce or alphabets != "" %}
      Jazyky popisované oběma formalismy <b>nejsou ekvivalentní</b>.
      {% else %}
          Jazyky popisované oběma formalismy jsou ekvivalentní.
      {% endif %}</div><br>

      <div>
          <div style="float:left;"><label for="teacher_string"><h3 style="text-align:center">
              Jazyk zadání</h3></label>
      <div style="width:400px;" name="teacher_string" id="teacher_string">
          <b>Charakteristika:</b> {{ teacher.sizename }}<br><br>
          <b>Příklad slova z jazyka:</b> {{ teacher.example }}<br><br>
          <b>Původní popis:</b> <br>
          {{ teacher_type_string }}: {{ teacher.string }}<br><br>
          <b>Popis pomocí minimálního DFA:</b> <br>
          {{ teacher.minimal }}<br>
      </div><br>
      </div>

          <div style="float:right;"><label for="student_string"><h3 style="text-align:center">
              Jazyk řešení</h3></label>
      <div style="width:400px;" name="student_string" id="student_string">
          <b>Charakteristika:</b> {{ student.sizename }}<br><br>
          <b>Příklad slova z jazyka:</b> {{ student.example }}<br><br>
          <b>Původní popis:</b> <br>
          {{ student_type_string }}: {{ student.string }}<br><br>
          <b>Popis pomocí minimálního DFA:</b> <br>
          {{ student.minimal }}<br>
      </div><br>
      </div>
      </div>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
  <p>
  <h3>Porovnání jazyků</h3>

      {% if img_src %}
        <img style="float:left; margin:10px 30px;" src="static/img/{{ img_src }}.png" alt="{{ img_src }}"><br>
      {% endif %}

      {% if not ok and (extra_word_ce or missing_word_ce) %}
        {% if extra_word_ce %}
          Příklad slova, které je ve studentově řešení a není v zadaném jazyce: {{ extra_word_ce }}
        {% else %}
          Studentovo řešení je podmnožinou zadaného jazyka.
        {% endif %}<br>

        {% if missing_word_ce %}
          Příklad slova, které chybí ve studentově řešení a je v zadaném jazyce: {{ missing_word_ce }}
        {% else %}
          Studentovo řešení je nadmnožinou zadaného jazyka.
        {% endif %}<br>

        {% if inf %}Rozdíl porovnávaných jazyků je nekonečný.
        {% else %}Rozdíl porovnávaných jazyků je konečný.
        {% endif %}
      {% else %}
        {% if ok %}
        Jazyky jsou ekvivalentní.
        {% endif %}
      {% endif %}
  </p>

<div>
    {% if langs[0] %}
    <table>
      <tr>
      <th>Jazyk</th><th>Charakteristika</th><th>Slovo z jazyka</th><th>Automat</th></tr>
      <tr><td>0</td><td>{{ langs[0].sizename }}</td><td>{{ langs[0].example }}</td><td><button onclick="toggleDFA('.dfa_0')">Automat</button>
          <div class="dfa_0" style="display: none;">{{ langs[0].minimal }}</div></td></tr>
     {% if langs[1] %}
       <tr><td>1</td><td>{{ langs[1].sizename }}</td><td>{{ langs[1].example }}</td><td><button onclick="toggleDFA('.dfa_1')">Automat</button>
          <div class="dfa_1" style="display: none;">{{ langs[1].minimal }}</div></td></tr>
       {% if langs[2] %}
         <tr><td>2</td><td>{{ langs[2].sizename }}</td><td>{{ langs[2].example }}</td><td><button onclick="toggleDFA('.dfa_2')">Automat</button>
          <div class="dfa_2" style="display: none;">{{ langs[2].minimal }}</div></td></tr>
         {% if langs[3] %}
           <tr><td>3</td><td>{{ langs[3].sizename }}</td><td>{{ langs[3].example }}</td><td><button onclick="toggleDFA('.dfa_3')">Automat</button>
          <div class="dfa_3" style="display: none;">{{ langs[3].minimal }}</div></td></tr>
         {% endif %}
       {% endif %}
      {% endif %}
    </table>
    {% endif %}
</div>

<script>
function toggleDFA(dfa){
  el = document.querySelector(dfa);

  if(el.style.display == 'none'){
      el.style.display = 'block'
  }else{
     el.style.display = 'none'
  }
}
</script>

<br><br><br><br><br>
<div style="margin:10px 30px;">
    <h3>Vygenerovaný řetězec pro odpovědník</h3>
    {{ is_task }}
    </div>
{% endblock %}