{% extends 'base.html.twig' %}

{% block title%}Projekte{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">Projekte</li>
{% endblock %}

{% block left %} 
    <div class="row sticky-top" style="top:48px;">
        <nav class="navbar navbar-dark p-1 col-12" style="background-color: #444444;">
            <a class="navbar-brand col-5" href="#">Projekte</a>
        </nav>
    </div>
    <div class="row sticky-top" style="top:104px; background-color: #333333;">
        <div class="col-12 p-1 shadow">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
                <div class="btn-group mr-2" role="group" aria-label="First">
                    <div data-toggle="tooltip" data-placement="bottom" title="Neu">
                        <button type="button" class="btn btn-sm btn-no-side-padding" data-toggle="modal" data-target="#newProject" title="Neu" onclick="this.blur();">
                            <img src="{{ asset('build/images/clipboard-8-240.png') }}" class="icons" alt="Neu">
                        </button>
                    </div>
                    {# <button type="button" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Filtern" onclick="this.blur();">
                        <img src="{{ asset('build/images/filter-1-240.png') }}" class="icons rounded" alt="Filtern">
                    </button>
                    <button type="button" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Sortieren" onclick="this.blur();">
                        <img src="{{ asset('build/images/sort-1-240.png') }}" class="icons rounded" alt="Sortieren">
                    </button> #}
                </div>
            </div>
        </div> 
    </div>
    <div class="row sticky-top" style="top:157px;">
        <div class="col-12" style="background-color: #444444">
            <div class="sidebar-sticky sidebar-scrollbar" style="overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d4af37 #444444;">
                <ul id="listProjects" class="nav flex-column">
                    {% for project in projects %}
                        <li class="listProjects nav-item"  id="{{ project.id }}">
                            <div class="d-flex justify-content-between">
                                <a class="nav-link" href="#" onclick="loadProperties('{{ project.id }}');" style="padding-left: 0px;">{{ project.name }}</a>

                                <div class="dropdown">
                                    <a class="btn btn-sm" type="button" data-toggle="dropdown">
                                        <img src="{{ asset('build/images/menu-11-240.png') }}" class="icons rounded" />
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#copyProject" data-id="{{ project.id }}" onclick="openCopyProject(this); this.blur();">
                                                <img src="{{ asset('build/images/copy-6-240.png') }}" class="icons-sm rounded" alt="Kopieren"/>&nbsp;Kopieren
                                            </a>
                                        </li>
                                        <li>
                                            <a class="open-rename dropdown-item" href="#" data-toggle="modal" data-target="#renameProject" data-id="{{ project.id }}" data-name="{{ project.name }}" onclick="openRenameProject(this);">
                                                <img src="{{ asset('build/images/speech-bubble-30-240.png') }}" class="icons-sm rounded" alt=""/>&nbsp;Umbenennen
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" onclick="deleteProject(this)" data-id="{{ project.id }}">
                                                <img src="{{ asset('build/images/x-mark-1-240.png') }}" class="icons-sm rounded" alt="L&ouml;schen"/>&nbsp;L&ouml;schen
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>                
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block middle %}
    <div class="row sticky-top" style="top: 48px;">
        <nav class="navbar navbar-dark p-1 col-12 navbar-shadow" style="background-color: #444444; min-height: 56px;">
            <div id="buttonsProject" class="btn-toolbar" role="toolbar" aria-label="Toolbar">
                <div class="btn-group mr-2" role="group">
                    <button id="closeProjectBar" class="btn btn-sm" onclick="this.blur();" style="color: #ffffff;">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button id="btnNew" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Neue Zeile" onclick="addTableRow(); this.blur();">
                        <img src="{{ asset('build/images/chart-4-240_Zeile-einfuegen.png') }}" class="icons rounded" alt="Neue Zeile">
                    </button>
                    <button id="btnDelete" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Zeile L&ouml;schen" onclick="this.blur();">
                        <img src="{{ asset('build/images/chart-4-240_Zeile-loeschen.png') }}" class="icons rounded" alt="Zeile L&ouml;schen">
                    </button>
                    {# <form action="{{ path ('engineering') }}"> #}
                        <!-- <button Id="btnOpenProject" type="submit" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Designer" onclick="location.href = '/engineering'">
                            <img src="{{ asset('build/images/paintbrush-1-240.png') }}" class="icons rounded" alt="Designer">
                        </button> -->
                    {# </form> #}
                    {# <form action="{{ path ('configurator') }}"> #}
                        <!-- <button Id="btnOpenProject" type="submit" class="btn btn-sm btn-no-side-padding" data-toggle="tooltip" data-placement="bottom" title="Konfigurator" onclick="this.blur();">
                            <img src="{{ asset('build/images/wrench-1-240.png') }}" class="icons rounded" alt="Konfigurator">
                        </button> -->
                    {# </form> #}
                    <button id="closeDetailsView" class="btn btn-sm" onclick="this.blur();" style="color: #ffffff;">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </nav>
    </div>
    <div class="row" style="overflow-y: scroll; height: calc(100vh - 104.6px);">
        <div id="properties" class="col-12" style="display: block; width: 100%">
            <table id="dataTable" class="table tableFixHead table-striped table-bordered table-hover"></table>
        </div>
    </div>

    <div class="modal fade" id="newProject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Neues Projekt</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <label for="projectName">Name</label>
                <input id="projectName" name="projectName" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                <button id="btnSaveNewProject" type="button" class="btn btn-primary" data-dismiss="modal">Speichern</button>
            </div>
        </div>
        </div>
    </div>

    <div class="modal fade" id="renameProject" tabindex="-1" role="dialog" aria-labelledby="renameProjectLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="renameProjectLabel">Engineering-Liste umbenennen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="renameId" name="renameId">
                    <label for="renameOldName">Aktueller Name</label>
                    <input id="renameOldName" name="renameOldName" type="text" disabled><br>
                    <label for="renameNewName">Neuer Name</label>
                    <input id="renameNewName" name="renameNewName" type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                    <button id="btnRenameProject" type="button" class="btn btn-primary" data-dismiss="modal">Speichern</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyProject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Projekt Kopieren</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="copyId" name="copyId">
                    <label for="copyNewName">Neuer Name</label>
                    <input id="copyNewName" name="copyNewName" type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                    <button id="btnCopyProject" type="button" class="btn btn-primary" data-dismiss="modal">Speichern</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block right %}
<div class="row sticky-top">
    <nav class="navbar navbar-dark p-1 col-md-12" style="background-color: #444444; min-height: 56px;">
        <a class="navbar-brand col-lg-5" href="#">Detailansicht</a>
    </nav>
</div>
<div class="row">
    <div id="projectDetails" class="col-12">
        
    </div>
</div>

<div class="modal fade" id="templateSelect" tabindex="-1" role="dialog" aria-labelledby="templateSelectLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="overflow-y: initial !important;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="templateSelectLabel">Vorlagenauswahl</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div id="templateSelectList" class="col-6" style="height: 70vh; overflow-y: auto;">
                            <div class="row">
                                <input id="templateSelectSearch" type="text" placeholder="Suche..." autocomplete="off" style="margin-bottom: 5px;">
                            </div>
                            <div class="row">
                                <div id="fancytree"></div>
                            </div>
                        </div>
                        <div id="templateSelectDetail" class="col-6" style="height: 70vh; overflow-y: auto;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                <button id="btnAcceptTemplate" type="button" class="btn btn-primary" data-dismiss="modal">Ausw&auml;hlen</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('project') }}
{% endblock %}