{% extends "layout.html" %}

{% block head %}
<!-- Styles -->
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/lib/flat-ui.css" />
<link rel="stylesheet" href="/static/css/studio.css" />
<!-- jQuery -->
<script type="text/javascript" src="/static/lib/jquery.2.0.0.js"></script>
<!-- THREE -->
<script type="text/javascript" src="/static/lib/three.r58.js"></script>
<!-- Bootstrap JS -->
<!--<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-collapse.js"></script>-->
<!-- Flat UI -->
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-radio.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-checkbox.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap-select.js"></script>
<!-- Handlebars -->
<script type="text/javascript" src="/static/lib/handlebars.1.0.rc4.js"></script>
<!-- Studio -->
<script type="text/javascript" src="/static/js/objects.js"></script>
<script type="text/javascript" src="/static/js/cameras.js"></script>
<script type="text/javascript" src="/static/js/studio.js"></script>
<script type="text/javascript" src="/static/js/modals.js"></script>
<script defer="defer" type="text/javascript" src="/static/js/loader.js"></script>
{% endblock %}

{% block header %}
<header>
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand">MinecraftCodex : Studio</a>
                <div>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                Creation
                                <i class="icon-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" onclick="javascript:Studio.reset()">New</a></li>
                                <li class="divider"></li>
                                <li><a href="{{ url('homepage') }}">Exit</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                Canvas
                                <i class="icon-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" 
                                        onclick="javascript:modalManager.modal('changeCanvas')">Canvas size...</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                        <li>
                            <a href="{{ url('homepage') }}">
                                <i class="icon-arrow-left"></i> Go back
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- /navbar-inner -->
    </div>      
</header>
{% endblock %}

{% block content %}
<div class="studio-workspace">
    <div class="panel panel-left">
        <div class="well">
            <h4 class="margin-none">Edit object</h4>
            <div class="clearfix"></div>
            <div class="edit-object">

            </div>
        </div>
        <div class="well">
            <div class="pull-right">
                <input type="text" class="texture-search" placeholder="Search..." />
            </div>
            <h4 class="margin-none">Textures</h4>
            <div class="clearfix"></div>
            <div class="texture-list">
            {% for item in textures %}
                <div class="item" data-type="texture" data-name="{{ item.name }}"
                data-texture="/static/textures/{{ item.get_image() }}"
                data-studio="change-texture">
                    <div class="codexicon x2">
                        <img src="/static/textures/{{ item.get_image(2) }}" />
                    </div>
                </div>
            {% endfor %}
            </div>
            <div class="text-center"><span class="texture-name badge">Mouseover a texture</span></div>
        </div>
    </div>
    <div class="panel panel-canvas">
        <div class="studio-canvas"></div>
    </div>
    <div class="panel panel-right">
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#camera">
                Toggle
            </button>
            <h4 class="margin-none">Camera</h4>
            <div class="clearfix"></div>
            <div id="camera" class="text-right">
                <hr />
                <div class="row-fluid">
                    <div class="span6 text-center">
                        <span class="radio">
                            <input type="radio" name="cameraType" value="perspective"
                            data-toggle="radio">
                            Perspective
                        </span>
                    </div>
                    <div class="span6 text-center">
                        <span class="radio">
                            <input type="radio" name="cameraType" value="orthographic"
                            data-toggle="radio">
                            Orthograpic
                        </span>
                    </div>
                </div>
                <div class="text-center">
                    Position
                </div>
                <div class="row-fluid">
                    <div class="span4 text-center">
                        <input type="text" value="0" class="span5 text-center disabled camera-x"
                            disabled="disabled" />
                        <div>
                            <button class="btn btn-small icon-plus btn-camera-x-plus"></button>
                            <span class="label label-info valing-top">X</span>
                            <button class="btn btn-small icon-minus btn-camera-x-minus"></button>
                        </div>
                    </div>
                    <div class="span4 text-center">
                        <input type="text" value="0" class="span5 text-center disabled camera-y"
                            disabled="disabled" />
                        <div>
                            <button class="btn btn-small icon-plus btn-camera-y-plus"></button>
                            <span class="label label-info valing-top">Y</span>
                            <button class="btn btn-small icon-minus btn-camera-y-minus"></button>
                        </div>
                    </div>
                    <div class="span4 text-center">
                        <input type="text" value="0" class="span5 text-center disabled camera-z"
                            disabled="disabled" />
                        <div>
                            <button class="btn btn-small icon-plus btn-camera-z-plus"></button>
                            <span class="label label-info valing-top">Z</span>
                            <button class="btn btn-small icon-minus btn-camera-z-minus"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#objects">
                Toggle
            </button>
            <h4 class="margin-none">Objects</h4>
            <div id="objects" class="text-right">
                <hr />
                <select name="object-list" class="flatui object-list">
                </select>
                <button class="btn btn-primary btn-addobject btn-round valing-top">
                    <i class="icon-plus"></i>
                </button>
                <table class="table">
                    <tbody class="entities-list">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#lights">
                Toggle
            </button>
            <h4 class="margin-none">Lights</h4>
            <div id="lights">
                <hr />
            </div>
        </div>
    </div>
</div>
{% include "studio/modals.html" %}
{% include "studio/templates.html" %}
{% endblock %}

{% block footer %}{% endblock %}