{% load humanize %}
<div id="cart-sidebar" class="w-100">
    <div id="op-cart-summary" class="well well-lg">
        <div class="op-download-options-header border-bottom border-light">
            <span class="op-download-panel-title"><h1>Download Data</h1></span>
            <div class="op-cart-totals mb-1">
                <p class="op-total-size mb-0 me-3">Total Size (before zip):
                    <span class="spinner">&nbsp;</span>
                    <span id="op-total-download-size">{{ total_download_size_pretty }}</span>
                </p>
                <p class="op-total-download">Total Files:
                    <span class="spinner">&nbsp;</span>
                    <span id="op-total-download-count">{{ total_download_count|intcomma }}</span>
                </p>
            </div>
            <div class="op-download-options
                    {% if count < 1 %}
                        op-button-disabled
                    {% endif %}
                ">
                <li class="list-inline-item">
                    <div id="create_zip_data_file">
                        <a href="#" class="downloadData btn btn-outline-primary op-cart-tooltip" title="Download a zipped data archive of all observations in the cart using the selected products"><i class="fas fa-download"></i>&nbsp;Data Archive</a>
                    </div>
                </li>
                <li class="list-inline-item">
                    <div id="create_zip_url_file">
                        <a href="#" class="downloadURL btn btn-outline-primary op-cart-tooltip" title="Download a zipped URL archive of all observations in the cart using the selected products"><i class="fas fa-download"></i>&nbsp;URL Archive</a>
                    </div>
                </li>
                <li class="list-inline-item">
                    <a href="#" class="op-download-csv btn btn-outline-primary op-cart-tooltip" download title="Download a CSV of selected metadata for all observations in the cart"><i class="fas fa-file-csv"></i>&nbsp;Metadata CSV</a>
                </li>
            </div>
            <h1 class="op-download-options-title">Download Options</h1>
            <div class="row no-gutters op-download-flat-zip-file-structure">
                <div class="row no-gutters col-7">
                    <div class="col col-sm-1">
                        <input type="checkbox" checked>
                    </div>
                    <div class="col col-sm-1">
                        <i class="fas fa-info-circle op-cart-tooltip" title="If unchecked, download products will be added to the zip file using the same directory structure used by the PDS RMS archive. If checked, all download products will be placed in the root directory of the zip file, unless there is an ambiguity caused by multiple files that have the same base filename. In that case those files only will be added using the full directory structure."></i>
                    </div>
                    <div class="col col-lg">Flat file structure</div>
                </div>
                <div class="col">File format:&nbsp;
                    <select class="op-download-format" tabindex="0">
                        {% for fmt in format %}
                            <option value="{{ fmt }}">{{ fmt }}</option>
                        {% endfor %}
                    <select>
                </div>
            </div>
            <p class="m-0 mb-1">Select which product types to include in downloads:</p>
            <div class="op-product-types-select-btn-group mb-1">
                <button class="op-cart-select-all-btn btn btn-sm btn-primary
                    {% if count < 1 and recycled_count < 1  %}
                        op-button-disabled
                    {% endif %}
                    " type="button">
                    <i class="fas fa-check"></i>&nbsp;&nbsp;Select all current version product types
                </button>
                <button class="op-cart-deselect-all-btn btn btn-sm btn-danger
                    {% if count < 1 and recycled_count < 1  %}
                        op-button-disabled
                    {% endif %}
                " type="button">
                    <i class="fas fa-times"></i>&nbsp;&nbsp;Deselect all product types
                </button>
            </div>
            <div class="row no-gutters op-cart-download-show-ver mb-1">
                <div class="row no-gutters col-7">
                    <div class="col col-sm-1">
                        <input type="checkbox">
                    </div>
                    <div class="col col-sm-1">
                        <i class="fas fa-info-circle op-cart-tooltip" title="If checked, all non-current versions of files will be displayed in the table."></i>
                    </div>
                    <div class="col col-lg">Show previous versions</div>
                </div>
            </div>
        </div>
        <div class="op-download-options-product-types w-100">
            <div class="row op-product-type-table-header fw-bold border-bottom border-light no-gutters me-3">
                <div class="col-7">Product Type</div>
                <div class="col text-end"># Obs</div>
                <div class="col text-end"># Files</div>
                <div class="col text-end">Size</div>
            </div>
            <div class="op-product-type-table-body pe-3">
                {% for product_cat, product_versions in product_cat_dict.items %}
                    <div class="row no-gutters bg-secondary">
                        <div class="col-12">
                            <h5 class="mt-2">
                                <button class="op-cart-select-btn btn btn-sm p-0 border-0 bg-secondary op-cart-tooltip" data-category="{{ product_cat|slugify }}" type="button" title="Select all in category"><i class="fas fa-check"></i></button>
                                <button class="op-cart-deselect-btn btn btn-sm p-0 border-0 bg-secondary op-cart-tooltip" data-category="{{ product_cat|slugify }}" type="button" title="Deselect all in category"><i class="fas fa-times"></i></button>
                                {{ product_cat }}
                            </h5>
                        </div>
                    </div>
                    {% for ver, product_list in product_versions.items %}
                        {% if ver != "Current" %}
                            <div class="row no-gutters bg-light op-cart-ver-sub-header op-cart-ver-hidden">
                                <div class="col-12">
                                    <div class="col col-sm-1"></div>
                                    <span class="mt-2">
                                        <button class="op-cart-select-btn op-cart-select-btn-sub btn btn-sm p-0 border-0 bg-light op-cart-tooltip" data-category="{{ product_cat|slugify }}-{{ ver }}" type="button" title="Select all in category"><i class="fas fa-check"></i></button>
                                        <button class="op-cart-deselect-btn op-cart-deselect-btn-sub btn btn-sm p-0 border-0 bg-light op-cart-tooltip" data-category="{{ product_cat|slugify }}-{{ ver }}" type="button" title="Deselect all in category"><i class="fas fa-times"></i></button>
                                        Version: {{ ver }}
                                    </span>
                                </div>
                            </div>
                        {% endif%}
                        {% for product_info in product_list %}
                            <div id="op-product-{{ product_info.slug_name }}" class="row no-gutters border-bottom border-light {% if ver != 'Current' %} op-cart-ver-item op-cart-ver-hidden {% endif%}">
                                <div class="row col-7 no-gutters">
                                    {% if ver != "Current" %}
                                        <div class="col col-sm-1"></div>
                                    {% endif%}
                                    <div class="col col-sm-1">
                                        {% if ver != "Current" %}
                                            <input type="checkbox" value="{{ product_info.product_type_with_version }}" data-category="{{ product_cat|slugify }}-{{ ver }}"
                                                {{ product_info.selected }}
                                            >
                                        {% else %}
                                            <input class="op-cart-current-ver-input" type="checkbox" value="{{ product_info.product_type_with_version }}" data-category="{{ product_cat|slugify }}"
                                                {{ product_info.selected }}
                                            >
                                        {% endif%}
                                    </div>
                                    <div class="col col-sm-1">
                                        {% if product_info.tooltip %}
                                            <i class="fas fa-info-circle op-cart-tooltip" title="{{ product_info.tooltip }}"></i>
                                        {% endif %}
                                    </div>
                                    <div class="col col-lg">
                                        {{ product_info.product_type }}
                                    </div>
                                </div>
                                <div class="op-options-obs col text-end">{{ product_info.product_count|intcomma }}</div>
                                <div class="op-options-files col text-end">{{ product_info.download_count|intcomma }}</div>
                                <div class="op-options-size col text-end">{{ product_info.download_size_pretty }}</div>
                            </div>
                        {% endfor %}
                    {% endfor %}
                {% endfor %}
                <div class="op-data-archive-notes">
                    <hr class="mt-2 mb-2">
                    In addition to the selected product types, the following files are always included
                    in all archives:
                    <ul>
                        <li>The metadata CSV (data.csv)</li>
                        <li>The URLs of all data products (urls.txt)</li>
                        <li>The manifest listing each OPUS ID along with the details of each associated file (manifest.csv)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>