{% extends "ui/menu.html" %}

{% block menu %}
<div class="row op-select-metadata-headers">
    <div class="col">
        <div class="op-all-metadata-column-header">
            <div class="text-center fw-bold h5">Available Metadata Fields</div>
            Click on a field name to include (or exclude) it from the Selected Metadata list.
            To show Surface Geometry Constraints, use the Surface Geometry Target Selector on
            the Search tab.
        </div>
    </div>
    <div class="col">
        <div class="op-selected-metadata-column-header">
            <div class="text-center fw-bold h5">Selected Metadata Fields</div>
            These fields will be shown in the Table View, Slideshow, and Detail tab and
            will be included in downloaded CSV files and archives. Fields can be reordered
            with drag-and-drop.
        </div>
    </div>
</div>
<hr class="op-select-metadata-headers-hr">

<div class="row op-select-metadata-row-contents">
    <div class="col">
        <div class="op-all-metadata-column">
            {{ block.super }} {# renders ui/menu.html #}
        </div>
    </div>

    <div class="col">
        <div class="row op-selected-metadata-column">
      	    <ul>
                {% for slug, param_info in all_slugs_info.items %}
      		        <li id="cchoose__{{ slug }}">
                        <span class="op-selected-metadata-info">
                            &nbsp;<i class="fas fa-info-circle op-metadata-selector-tooltip" title="{{ param_info.get_tooltip_results }}"></i>
                        </span>
                        <span>{{ param_info.body_qualified_label_results }}
                        {% if param_info.units %}
                            (<div class="op-units-dropdown dropdown d-inline">
                                <a class="op-{{ param_info.slug }}-units-dropdown-toggle dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-prevdispvalue="{{ param_info.disp_unit }}" aria-haspopup="true" aria-expanded="false">
                                {{ param_info.disp_unit }}
                                </a>
                                <div class="dropdown-menu op-scrollable-menu" aria-labelledby="dropdownMenuLink">
                                {% for unit_val, unit_disp in param_info.units.items %}
                                    <a class="dropdown-item" data-defaultunit="{{ param_info.default_unit }}" data-value="{{ unit_val }}" data-dispvalue="{{ unit_disp }}" data-slug="{{ param_info.slug }}" href="#">{{ unit_disp }}</a>
                                {% endfor %}
                                </div>
                            </div>)
                        {% endif %}
                        </span>
                        <span class="op-selected-metadata-unselect"><i class="far fa-trash-alt"></i></span>
    	            </li>
                {% endfor %}
            </ul>
        </div>
        <a href="#" class="op-download-csv btn btn-outline-primary op-metadata-selector-tooltip" download title="Download CSV of selected metadata for ALL observations in current results">
            <i class="fas fa-download"></i>&nbsp;Download CSV (all results)
        </a>
    </div>
</div>
{% endblock %}