{% load i18n %}

<div class="primary-descriptors-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs card-nav-container flex pad-no" role="tablist">
    <li role="presentation" class="active">
        <a href="#primary-descriptors-name" aria-controls="primary-descriptors-name" role="tab" data-toggle="tab">
            <span data-bind="text: $root.translations.displayName"></span>
        </a>
    </li>
    <li role="presentation">
        <a href="#primary-descriptors-description" aria-controls="primary-descriptors-description" role="tab" data-toggle="tab">
            <span data-bind="text: $root.translations.displayDescription"></span>
        </a>
    </li>
    <li role="presentation">
        <a href="#primary-descriptors-map-popup" aria-controls="primary-descriptors-description" role="tab" data-toggle="tab">
            <span data-bind="text: $root.translations.mapPopup"></span>
        </a>
    </li>
    <li style="flex-grow: 1;"></li>
    <li role="presentation">
        <a href="#reindex" aria-controls="reindex" role="tab" data-toggle="tab">
            <span data-bind="text: $root.translations.reindex"></span>
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane primary-descriptors-panel active" role="tabpanel" id="primary-descriptors-name">
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.selectANode"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="select2Query: {
                            select2Config: {
                                ...baseSelect2Config,
                                value: selectedNodes.name,
                            }
                        }"
                    ></select>
                </div>
            </div>
        </div>
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.primaryNameTemplate"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <input 
                        class="form-control input-lg widget-input" 
                        data-bind="textInput: name.string_template"
                    >
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane" role="tabpanel" id="primary-descriptors-description">
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.selectANode"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="select2Query: {
                            select2Config: {
                                ...baseSelect2Config,
                                value: selectedNodes.description,
                            }
                        }"
                    ></select>
                </div>
            </div>
        </div>
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.primaryDescriptionTemplate"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <input 
                        class="form-control input-lg widget-input" 
                        data-bind="textInput: description.string_template"
                    >
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane" role="tabpanel" id="primary-descriptors-map-popup">
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.selectANode"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="select2Query: {
                            select2Config: {
                                ...baseSelect2Config,
                                value: selectedNodes.map_popup,
                            }
                        }"
                    ></select>
                </div>
            </div>
        </div>
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <label class="col-xs-12 control-label widget-input-label">
                        <span data-bind="text: $root.translations.mapPopupTemplate"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <input 
                        class="form-control input-lg widget-input" 
                        data-bind="textInput: map_popup.string_template"
                    >
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane" role="tabpanel" id="reindex">
        <div class="row widget-container">
            <div class="form-group">
                <div class="relative">
                    <i class="fa fa-exclamation-triangle" style="color: #f75d3f;"></i>
                    <span class="control-label" data-bind="text: $root.translations.functionReindexMessage"></span>
                </div>

                <div class="flex" style="flex-direction: row-reverse;">
                    <a class="btn btn-sm btn-primary btn-labeled fa fa-refresh" style="float: right;margin-top: 6px;margin-right: 6px;" data-bind="visible: !loading(), click: reindexdb;">
                        <span data-bind="text: $root.translations.reindexResourcesNow"></span>
                    </a>
                    <a class="btn btn-primary" href="#" style="float: right;margin-top: 6px;margin-right: 6px; padding:0px 5px 0px 0px;" data-bind="visible: loading">
                        <i class="fa fa-spin fa-refresh" style="padding: 8px;"></i>
                        <span data-bind="text: $root.translations.reindexing"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
