{% 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.cardName"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="
                            placeholder: $root.translations.selectPrimaryDescriptionIdentifierCard,
                            value: name.nodegroup_id, 
                            options: cards, 
                            optionsText: 'name', 
                            optionsValue: 'nodegroup_id', 
                            chosen: {width: '100%', allow_single_deselect: true, disable_search_threshold: 15}
                        "
                    ></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="
                            attr: {placeholder: $root.translations.useBracketedNodeNames},
                            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.cardName"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="
                            placeholder: $root.translations.selectPrimaryDescriptionIdentifierCard,
                            value: description.nodegroup_id, 
                            options: cards, 
                            optionsText: 'name', 
                            optionsValue: 'nodegroup_id', 
                            valueAllowUnset: true, 
                            chosen: {width: '100%', allow_single_deselect: true, disable_search_threshold: 15}
                        "
                    ></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="
                            attr: {placeholder: $root.translations.useBracketedNodeNames},
                            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.cardName"></span>
                    </label>
                </div>

                <div class="col-xs-12">
                    <select 
                        data-bind="
                            placeholder: $root.translations.selectPrimaryDescriptionIdentifierCard,
                            value: map_popup.nodegroup_id, 
                            options: cards, 
                            optionsText: 'name', 
                            optionsValue: 'nodegroup_id', 
                            valueAllowUnset: true, 
                            chosen: {width: '100%', allow_single_deselect: true, disable_search_threshold: 15}
                        "
                    ></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="
                            attr: {placeholder: $root.translations.useBracketedNodeNames},
                            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>
