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

{% block title%}Sytemdaten{% endblock %}

{% block left %}
    <div class="row sticky-top" style="top:48px;">
        <nav class="navbar navbar-dark p-1 col-md-12" style="background-color: #444444;">
            <a class="navbar-brand col-lg-5" href="#">Systemdaten</a>
        </nav>
    </div>
    <div class="row sticky-top" style="top:104px; background-color: #333333;">
        <nav class="navbar navbar-dark col-md-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 class="placeholder"></div>
                </div>
            </div>
        </nav> 
    </div>
    <div class="row sticky-top" style="top:157px;">
        <nav class="col-md-12 d-none d-md-block" style="background-color: #444444">
            <div class="sidebar-sticky">
                <ul id="listProjects" class="nav flex-column">
                    <li class="nav-item" id="claimsMacros">
                        <div class="d-flex justify-content-between">
                            <a class="nav-link" href="#" onclick="loadClaims('macro');" style="padding-left: 0px;">Makros</a>
                        </div>
                    </li>
                    <li class="nav-item" id="claimsTemplates">
                        <div class="d-flex justify-content-between">
                            <a class="nav-link" href="#" onclick="loadClaims('project')" style="padding-left: 0px;">Projektvorlagen</a>
                        </div>
                    </li> 
                </ul>
                <div class="d-flex justify-content-between" style="position: absolute; bottom: 10px; left: 0;">
                    <a class="nav-link" href="/client/installer/WebCGC Client Installer.exe">Client herunterladen</a>
                </div>
            </div>
        </nav>
    </div>
{% endblock %}

{% block middle %}
    <div class="row sticky-top" style="top:48px">
        <nav class="navbar navbar-dark p-1 col-md-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" style="color: #ffffff;">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <a class="btn btn-sm btn-no-side-padding" href="#" data-toggle="tooltip" data-placement="bottom" title="L&ouml;schen" onclick="deleteSelectedMacros(); this.blur();">
                        <img src="{{ asset('build/images/chart-4-240_Zeile-loeschen.png') }}" class="icons rounded" alt="Zeile l&ouml;schen">
                    </a>
                    <a id="macroFolderSelect" class="btn btn-sm btn-no-side-padding" href="#" data-toggle="tooltip" data-placement="bottom" title="Hochladen" onclick="this.blur();">
                        <img src="{{ asset('build/images/iconmonstr-upload-20-240.png') }}" class="icons rounded" alt="Makros hochladen">
                    </a>
                    <button id="closeDetailsView" class="btn btn-sm btn-no-side-padding" 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%">
            {# <h1>Makros</h1>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>hochgeladen am</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in files %}
                        <tr>
                            <td>{{file.name}}</td>
                            <td>{{file.uploadDate|date("d.m.Y H:i:s")}}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table> #}
            <table id="dataTable" class="table tableFixHead table-striped table-bordered table-hover"></table>
            <br>
            <p>
                <!-- <label for="macroUpload" class="btn btn-primary">EPJ hochladen</label>
                <input type="file" id="macroUpload" onchange="readFiles(event)" style="display: none;" multiple>
                <p id="uploadStatus" style="display: none;"></p> -->

                <!-- <input type="button" class="btn btn-primary" id="macroFolderSelect" name="macroFolderSelect" value="Ordner auswählen"> -->
            </p>
        </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" style="overflow-y: scroll; height: calc(100vh - 104.6px); margin-left: -40px;">
    <ul id="detailsViewList"></ul>
</div>
{% endblock %}

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