{%- extends 'skeleton.html.twig' -%}

{% block title %}Painel{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/painel.css') }}">
{% endblock %}

{% block body_content %}
<div id="app"
    data-mercure-url="{{ mercureUrl }}",
    data-base-url="{{ path('painel_show', { publicId: painel.publicId}) }}"
    data-public-id="{{ painel.publicId }}"
    data-unidade-id="{{ painel.unidade.id }}">
    <div id="painel">
        <div id="featured" :class="{ flash: isFlash }">
            <div id="featured-inner" :class="{ 'ticket-enter': ticketEnter }" v-show="featured">
                <div id="featured-label">Senha chamada</div>
                <div id="featured-title"
                     :class="{ priority: featuredIsPriority }"
                     :style="{ '--priority': featured?.corPrioridade || 'inherit' }"
                     v-text="featuredTitle"></div>
                <div id="featured-subtitle" v-text="featuredSubtitle"></div>
                <div id="featured-description" v-text="featuredDescription"></div>
            </div>
            <div id="featured-empty" v-show="!featured">Aguardando chamada&hellip;</div>

            <footer id="featured-footer">
                <img id="novosga-logo" src="{{ asset('images/novosga-login.png') }}" alt="NovoSGA">
                <svg id="mangati-logo" viewBox="0 0 96.279118 32.583638" version="1.1" id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs   id="defs1" /><g   id="layer1"   transform="translate(-56.860437,-53.288529)"><g  id="g45"  transform="translate(12.973059,-104.78435)"  style="fill:#666666"><text    xml:space="preserve"    style="font-weight:bold;font-size:22.9618px;font-family:'Noto Sans Adlam';-inkscape-font-specification:'Noto Sans Adlam Bold';fill:#666666;fill-opacity:1;stroke-width:0.871375"    x="40.115623"    y="87.743195"    id="text40"    transform="matrix(1.0471937,0,0,0.95493319,0,101.60001)"><tspan   id="tspan40"   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Bold';fill:#666666;fill-opacity:1;stroke-width:0.871375"   x="40.115623"   y="87.743195">manga</tspan></text><text    xml:space="preserve"    style="font-weight:bold;font-size:22.9618px;font-family:'Noto Sans Adlam';-inkscape-font-specification:'Noto Sans Adlam Bold';fill:#666666;fill-opacity:1;stroke-width:0.871375"    x="118.51188"    y="87.78537"    id="text41"    transform="matrix(1.0471937,0,0,0.95493319,0,101.60001)"><tspan   id="tspan41"   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Bold';fill:#666666;fill-opacity:1;stroke-width:0.871375"   x="118.51188"   y="87.78537">ti</tspan></text><g    id="g44"    transform="translate(8.4648372,146.09552)"    style="fill:#666666"><g   id="g43"   transform="translate(6.680461,-41.011141)"   style="fill:#666666;fill-opacity:1"><g     id="g42"     style="fill:#666666"><path    id="path41"    style="fill:#666666;fill-opacity:1;stroke-width:1.071"    d="m 89.284989,52.988497 c 0,0 -5.70713,2.667401 -6.067329,7.260022 -0.55157,4.862773 1.688785,6.236312 1.688785,6.236312 0.58533,0 3.590525,-0.472835 3.905705,-4.19871 1e-5,-4.547595 0.472839,-9.297624 0.472839,-9.297624 z m -1.755965,2.654618 c -0.132579,0.132977 -0.258072,0.265949 -0.379822,0.399459 -3.08509,3.54286 -2.074292,10.361641 -2.074292,10.361641 0,0 -0.214666,-0.06616 -0.315226,-0.168465 -0.396241,-3.647437 -0.523999,-6.998222 2.389518,-10.193176 0.120395,-0.138259 0.246646,-0.271779 0.379822,-0.399459 z" /><path    id="path42"    style="fill:#666666;fill-opacity:1;stroke-width:1.071"    d="m 94.699129,58.309619 c -1.228357,-0.0053 -2.464723,0.267294 -3.579109,1.00459 -3.106777,2.521437 -2.386418,6.573759 -2.386418,6.573759 0,0 1.560093,1.421079 3.90002,0.595829 2.369978,-0.864385 2.358586,-2.013729 4.902543,-4.332552 2.161228,-1.440821 4.457095,-1.305863 4.457095,-1.305863 0,0 -3.609061,-2.519933 -7.294131,-2.535763 z m 0.644922,1.515153 c 0.899696,-0.0078 1.941958,0.105863 3.162081,0.3545 -7.024003,-1.103129 -8.393231,3.206602 -9.47384,5.750554 L 88.828687,65.63527 c 1.396702,-3.465301 2.616681,-5.776776 6.515364,-5.810498 z" /></g></g></g></g></g></svg>
            </footer>
        </div>

        <aside id="sidebar">
            <div id="history">
                <div id="history-heading">Histórico</div>
                <div v-if="history.length === 0" id="history-empty">sem registros</div>
                <div v-for="t in history"
                     :key="t.id"
                     class="history-item"
                     :class="{ priority: (t.peso || 0) > 0 }"
                     :style="{ '--priority': t.corPrioridade || 'inherit' }">
                    <div class="hi-ticket" v-text="t.senha"></div>
                    <div class="hi-desk" v-text="t.local + ' ' + padNum(t.numeroLocal, 2)"></div>
                    <div class="hi-service" v-text="t.servico ? t.servico.nome : ''"></div>
                </div>
            </div>
            <div id="clock-box">
                <div id="clock-time" v-text="clockTime"></div>
                <div id="clock-date" v-text="clockDate"></div>
            </div>
        </aside>

    </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/vue.min.js') }}"></script>
<script src="{{ asset('js/painel.js') }}"></script>
{% endblock %}
