{% extends "layouts/default.htm" %}
{% block content %}


<div class="wrap">

    <div class="grid">

        <div class="grid__cell 12of12">
            <div class="portlet">

                <div class="flex">

                    <div class="flex__item">
                        <p>Matice 1</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-0"
                                            id="{{iterator}}-0"
                                            placeholder="0"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_0" id="select_matrix_0" class="form-select__inner">
                                 <option value="0">Identita</option>
                                  <option value="1">Posun</option>
                                  <option value="2">Změna měřítka</option>
                                  <option value="3">Zkosení</option>
                                  <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex__item">
                        <p>Matice 2</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-1"
                                            id="{{iterator}}-1"
                                            placeholder="1"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_1" id="select_matrix_1" class="form-select__inner">
                              <option value="0">Identita</option>
                              <option value="1">Posun</option>
                              <option value="2">Změna měřítka</option>
                              <option value="3">Zkosení</option>
                              <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex__item">
                        <p>Matice 3</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-2"
                                            id="{{iterator}}-2"
                                            placeholder="2"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_2" id="select_matrix_2" class="form-select__inner">
                                  <option value="0">Identita</option>
                                  <option value="1">Posun</option>
                                  <option value="2">Změna měřítka</option>
                                  <option value="3">Zkosení</option>
                                  <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex__item">
                        <p>Matice 4</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-3"
                                            id="{{iterator}}-3"
                                            placeholder="3"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_3" id="select_matrix_3" class="form-select__inner">
                                  <option value="0">Identita</option>
                                  <option value="1">Posun</option>
                                  <option value="2">Změna měřítka</option>
                                  <option value="3">Zkosení</option>
                                  <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex__item">
                        <p>Matice 5</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-4"
                                            id="{{iterator}}-4"
                                            placeholder="4"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_4" id="select_matrix_4" class="form-select__inner">
                                  <option value="0">Identita</option>
                                  <option value="1">Posun</option>
                                  <option value="2">Změna měřítka</option>
                                  <option value="3">Zkosení</option>
                                  <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex__item">
                        <p>Matice 6</p>
                        <div class="matrix u-mb-1rem">
                            {% set iterator = 0 %}
                            {% for i in range(1, 5) %}
                            <div class="matrix__row">
                                {% for j in range(1, 5) %}
                                <div class="matrix__cell matrix__cell--only-input">
                                    <input
                                            class="matrix__input"
                                            type="number"
                                            name="{{iterator}}-5"
                                            id="{{iterator}}-5"
                                            placeholder="5"
                                            {% if i === 4 %}readonly{% endif %}
                                    >
                                </div>

                                {% set iterator = iterator + 1 %}
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-select">
                            <select name="select_matrix_5" id="select_matrix_5" class="form-select__inner">
                                  <option value="0">Identita</option>
                                  <option value="1">Posun</option>
                                  <option value="2">Změna měřítka</option>
                                  <option value="3">Zkosení</option>
                                  <option value="4">Rotace</option>
                            </select>
                        </div>
                    </div>

                </div>


            </div>
        </div>

        <div class="grid__cell 6of12">
            <div class="portlet portlet--no-padding">
                <div class="scene">
                    <div class="scene__inner">
                        <canvas id="scene_m"></canvas>
                    </div>
                </div>
            </div>
            <p></p>
        </div>


        <div class="grid__cell 6of12">
            <div class="portlet">

                <div class="flex">

                    <div class="flex__item">
                        <div class="flex__item">
                            <p class="form-select">
                                <select name="select_shape" id="select_shape" class="form-select__inner">
                                    <option value="1">Krychle</option>
                                    <option value="2">Koule</option>
                                    <option value="3">Torus</option>
                                </select>
                            </p>
                            <p>Finální matice</p>
                            <div class="matrix u-mb-1rem">
                                {% set iterator = 0 %}
                                {% for i in range(1, 5) %}
                                <div class="matrix__row">
                                    {% for j in range(1, 5) %}
                                    <div class="matrix__cell matrix__cell--only-input">
                                        <input class="matrix__input" type="number" name="{{iterator}}-f" id="{{iterator}}-f" placeholder="x" readonly>
                                    </div>

                                    {% set iterator = iterator + 1 %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>
                            <p><button id="button_create" class="button">Restart Scény</button></p>
                            <p><button id="button_transform" class="button">Transformuj</button></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

{% endblock %}