<nav class="navbar-fixed-top container-fluid" id="nav_menu">
    <div class="row" id="menu-row">

        <div class="col-sm-3 btn-group-vertical menu-section" id="filter-pane">
            <h7 class="menu-section-header">Filter tuple pairs by label</h7>
            <div class="layout-buttons">
                <button type="button" class="btn btn-default" onclick=filter_tuples('Yes')>Show "Yes" <span
                        class="badge">{{ match_count|int }}</span>
                </button>
                <button type="button" class="btn btn-default" onclick=filter_tuples('Not-Matched')>Show "No" <span
                        class="badge">{{ not_match_count|int }}</span>
                </button>
                <button type="button" class="btn btn-default" onclick=filter_tuples('Not-Sure')>Show "Not Sure" <span
                        class="badge"> {{ not_sure_count|int }}</span>
                </button>
                <button type="button" class="btn btn-default" onclick=filter_tuples('Not-Labeled')>Show "Not Labelled" <span
                        class="badge">{{ unlabeled_count|int }}</span></button>
                <button type="button" class="btn btn-default" onclick=filter_tuples('All')>Show All <span
                        class="badge">{{ total_count }}</span>
                </button>
            </div>
        </div>


        <div class="col-sm-3 btn-group-vertical menu-section" id="select-display-pane">
            <h7 class="menu-section-header">Select display mode for tuple pairs</h7>
            <div class="layout-buttons">
                <button data-toggle="tooltip" title="Displays attributes horizontally and stacks tuple pairs" type="button"
                        class={% if layout == "horizontal" %} "btn btn-default active" {% else %} 'btn btn-default'{% endif %}
                onclick=change_layout("horizontal")>Horizontal
                </button>
                <button data-toggle="tooltip" title="Displays attributes one below each other and stacks tuple pairs" type="button"
                        class={% if layout == "vertical" %} "btn btn-default active" {% else %} 'btn btn-default'{% endif %}
                onclick=change_layout("vertical")>Vertical</button>
                <button data-toggle="tooltip" title="Displays attributes horizontally and shows one tuple pair at a time" type="button"
                        class={% if layout == "single" %} "btn btn-default active" {% else %} 'btn btn-default'{% endif %}
                onclick=change_layout("single")>One at a time</button>
            </div>
        </div>

        <div class="col-sm-3 menu-section" id="attribute-display-pane">
            <h7 class="menu-section-header">Select which attributes to show</h7>
            <div id="checkbox-div">
                {% for attribute in attributes %}
                    <div class="checkbox">
                        <label>
                            <input name="attribute_filter" id={{ attribute }} type="checkbox"> {{ attribute }}
                        </label>
                    </div>
                {% endfor %}

            </div>

            <button data-toggle="tooltip" title="Display tuple pairs with all attributes" type="button" class="btn btn-default"
                    id="clear-attribute-display-button" onclick=filter_attributes(true)>Clear filter
            </button>
            <button data-toggle="tooltip" title="Display tuple pairs with selected attributes" type="button" class="btn btn-default"
                    id="attribute-display-button" onclick=filter_attributes()>Change displayed attributes


            </button>
        </div>


        <div class="col-sm-3 menu-section" id="misc-options-pane">
            <h7 class="menu-section-header">Other options</h7>
            <br>

            <label>Maximum number of letters to show per attribute</label>
            <input type="number" name="attribute-token-count" value={{ tokens_per_attribute }} id="token_number_input">
            <button data-toggle="tooltip" title="Change the number of letters per attribute displayed" type="button" class="btn btn-md btn-default"
                    id="options-change-button" onclick=change_token_count()>Change number of letters
            </button>
            <br><br>
            {# todo: remove br and add padding #}
            <button data-toggle="tooltip" title="Save current labelling status to a csv file" type="button" class="btn btn-md btn-default"
                    id="save-button" onclick=save_data('{{ save_file_name }}')>
                Save to file
            </button>

        </div>
    </div>
</nav>