{% load i18n static %}

<div id="lexical-unit-notes-template" class="d-none">{% include 'notes.html' %}</div>

<div class="tab-content h-100 w-100 p-0" id="entryTabsContent">
    <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">
        <!-- Vue.js app -->
        <script src="https://unpkg.com/vue@3"></script>
        <div id="semantics-top-pane" class="overflow-auto"></div>
        <script type="module" src="{% static 'entries/js/unification_index.js' %}"></script>
        <!-- Vue.js app -->

        <div class="row m-0 p-0 overflow-auto" id="semantics-examples-pane">
            <table id="semantics-examples" class="table table-sm table-hover">
                <thead>
                <tr>
                    <th scope="col">{% trans "Przykład" %}<i id="examples-argument"></i><i id="examples-lu"></i><i id="examples-schema"></i></th>
                    <th scope="col">{% trans "Źródło" %}</th>
                    <th scope="col">{% trans "Opinia" %}</th>
                </tr>
                </thead>
                <tbody id="semantics-examples-list">
                </tbody>
            </table>
            <p class="mx-1 my-1"id="semantics-no-examples">{% trans "Brak przykładów" %}</p>
        </div>
    </div>
    <div class="col h-100 w-100 p-0 tab-pane" id="syntax" role="tabpanel" aria-labelledby="syntax-tab">
        <div class="col w-100 px-1 pt-0 pb-0 overflow-auto" id="syntax-schemata-pane">
            <div id="syntax-schemata"></div>
        </div>
        <div class="col w-100 p-0 overflow-auto" id="syntax-examples-pane">
            <table id="syntax-examples" class="table table-sm table-hover">
                <thead>
                <tr>
                    <th scope="col">{% trans "Przykład" %}</th>
                    <th scope="col">{% trans "Źródło" %}</th>
                    <th scope="col">{% trans "Opinia" %}</th>
                </tr>
                </thead>
                <tbody id="syntax-examples-list">
                </tbody>
            </table>
            <p class="mx-1 my-1"id="syntax-no-examples">{% trans "Brak przykładów" %}</p>
        </div>
    </div>
    <div class="col h-100 w-100 p-0 tab-pane" id="examples" role="tabpanel" aria-labelledby="examples-tab">
        <table id="unmatched-examples" class="table table-sm table-hover">
            <thead>
            <tr>
                <th scope="col">{% trans "Przykład" %}</th>
                <th scope="col">{% trans "Źródło" %}</th>
                <th scope="col">{% trans "Opinia" %}</th>
            </tr>
            </thead>
            <tbody id="unmatched-examples-list">
            </tbody>
        </table>
        <p class="mx-1 my-1"id="unmatched-no-examples">{% trans "Brak przykładów" %}</p>
    </div>
</div>