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

<div class="content">
    <div class="wrap">

        <div class="grid">

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

                    <div class="flex">

                        <div class="flex__item">
                            <p>Matice Kamery</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" readonly>
                                    </div>

                                    {% set iterator = iterator + 1 %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="flex__item">
                            <p>Matice Projekce</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" readonly>
                                    </div>

                                    {% set iterator = iterator + 1 %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="flex__item">
                            <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}}-1" id="{{iterator}}-2" placeholder="1" readonly>
                                    </div>

                                    {% set iterator = iterator + 1 %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="flex__item">
                            <div class="flex u-mb-2rem">
                                <div class="flex__item">
                                    <p>Manipulace s Objekty</p>
                                    <input type="checkbox" name="disableOrbit" id="disableOrbit">
                                </div>
                                <div class="flex__item">
                                    <p>Rotace Kamery</p>
                                    <input type="range" min="0" max="360" value="0" step="1" name="cameraRotateSlider" class="form-slider form-slider--wider" id="cameraRotateSlider">
                                    <input type="number" class="form-input form-input--short" name="cameraRotateNumber" id="cameraRotateNumber" value="0">
                                </div>
                            </div>
                            <div class="flex">
                                <div class="flex__item">
                                    <p>FOV Přímky</p>
                                    <input type="checkbox" name="fovLines" id="fovLines" checked>
                                </div>
                                <div class="flex__item">
                                    <p>FOV Plochy</p>
                                    <input type="checkbox" name="fovPlates" id="fovPlates" checked>
                                </div>
                                <div class="flex__item">
                                    <p>Vzdálenost kamery (FOV)</p>
                                    <input type="range" min="1" max="10" value="1" name="setFOVSlider" class="form-slider" id="setFOVSlider" step="1">
                                    <input type="number" class="form-input form-input--short" name="setFOVNumber" id="setFOVNumber" value="1">
                                </div>
                            </div>
                        </div>


                    </div>


                </div>
            </div>

            <div class="grid__cell 6of12">
                <h2>Pohled na scénu</h2>
                <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">
                <h2>Pohled přes průmětnu</h2>
                <div class="portlet portlet--no-padding">
                    <div class="scene">
                        <div class="scene__inner">
                            <canvas id="scene_p"></canvas>
                        </div>
                    </div>
                </div>
                <p></p>
            </div>

        </div>

    </div>
</div>

{% endblock %}