{% extends "list-page.html" %}


{% block style %}
{{ super() }}
<style>
.table-hover tbody tr:hover {
    background-color: #d3d3d3;
    cursor: pointer;
}

/* Highlight for selected row */
.table-hover tbody tr.selected-row > td{
    background-color: #cfe2ff !important;
}
.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

tbody tr td {
    white-space: nowrap;   /* keep text on one line */
    overflow: hidden;      /* hide the extra text */
    text-overflow: ellipsis; /* show ... at the end */
}

.component-actions-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.component-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.component-actions .btn {
    flex: 0 0 auto;
}

.component-filter-bar {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.component-filter-bar .form-label {
    font-size: 0.72rem;
    color: #5f6b7a;
    margin-bottom: 2px;
}

.component-sort-link {
    color: inherit;
    text-decoration: none;
}

.component-sort-link:hover {
    color: #0d6efd;
}

.component-table thead th {
    background-color: #ffffff;
}

.part-number-col {
    width: 120px;
    min-width: 120px;
}

.component-preview-name {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 20;
    max-width: calc(100% - 32px);
    padding: 6px 10px;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.component-preview-name-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.component-preview-action-button {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 3px;
}

.component-preview-placeholder {
    position: absolute;
    inset: 0;
    background: #f8f9fa;
    border: 1px solid #dadada;
    color: #5f6b7a;
    text-align: center;
    gap: 10px;
}

.component-preview-placeholder img {
    width: 72px;
    height: 72px;
    filter: brightness(0.5);
}
</style>
{% endblock style %}

{% block function_buttons %}
{% endblock function_buttons %}

{% block view_buttons %}
<a title="{{ _('Show parts results as list') }}" type="button" class="btn btn-outline-secondary btn-sm " href="#" onclick="setListView()">
    <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/list.svg') }}" width="16" height="16">
</a>
<a title="{{ _('Show parts results in splitscreen with preview') }}" type="button" class="btn btn-outline-secondary btn-sm " href="#" onclick="setPreviewView()">
    <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/layout-split.svg') }}" width="16" height="16">
</a>
{% endblock view_buttons %}

{% block main_view_content_list %}
<form class="component-filter-bar px-3 py-2" method="get" action="{{ url_for('components') }}">
    <h1 class="mb-0 mt-1" style="font-size: x-large;">{{ _('Parts') }}</h1>
    <input type="hidden" name="search_query" value="{{ search_query }}">
    <input type="hidden" name="sort" value="{{ sort_key }}">
    <input type="hidden" name="direction" value="{{ direction }}">
    <div class="row g-2 align-items-end">
        <div class="col-12 col-md-3">
            <label class="form-label" for="supplier-filter">{{ _('Supplier') }}</label>
            <select id="supplier-filter" class="form-select form-select-sm" name="supplier">
                <option value="">{{ _('All suppliers') }}</option>
                {% for supplier in suppliers %}
                <option value="{{ supplier.id }}" {% if filters.supplier == supplier.id|string %}selected{% endif %}>{{ supplier.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label" for="price-min-filter">{{ _('Min price (EUR)') }}</label>
            <input id="price-min-filter" class="form-control form-control-sm" name="price_min" type="number" min="0" step="0.01" value="{{ filters.price_min }}">
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label" for="price-max-filter">{{ _('Max price (EUR)') }}</label>
            <input id="price-max-filter" class="form-control form-control-sm" name="price_max" type="number" min="0" step="0.01" value="{{ filters.price_max }}">
        </div>
        <div class="col-12 col-md-5 d-flex gap-2 justify-content-md-end">
            <button class="btn btn-primary btn-sm" type="submit">{{ _('Apply') }}</button>
            <a class="btn btn-outline-secondary btn-sm" href="{{ components_url({'supplier': '', 'price_min': '', 'price_max': '', 'sort': '', 'direction': ''}) }}">{{ _('Reset') }}</a>
        </div>
    </div>
</form>
<p class="pb-2 pt-4 m-0 px-3" style="background-color: white;">{{ ngettext('%(num)s part was found.', '%(num)s parts were found.', len(components)) }}</p>
<table class="table table-striped table-hover component-table" style="outline-style: solid; outline-color: lightgray; outline-width: 1px;">
    <thead>
        <tr>
            <th class="component-actions-col"></th>
            {% set next_direction = 'desc' if sort_key == 'number' and direction == 'asc' else 'asc' %}
            <th class="part-number-col"><a class="component-sort-link text-nowrap" href="{{ components_url({'sort': 'number', 'direction': next_direction}) }}">{{ _('Part number') }}{% if sort_key == 'number' %}<i class="bi-arrow-{{ 'down' if direction == 'desc' else 'up' }}-short"></i>{% endif %}</a></th>
            {% set next_direction = 'desc' if sort_key == 'name' and direction == 'asc' else 'asc' %}
            <th><a class="component-sort-link" href="{{ components_url({'sort': 'name', 'direction': next_direction}) }}">{{ _('Name') }}{% if sort_key == 'name' %}<i class="bi-arrow-{{ 'down' if direction == 'desc' else 'up' }}-short"></i>{% endif %}</a></th>
            {% set next_direction = 'desc' if sort_key == 'unit_price' and direction == 'asc' else 'asc' %}
            <th><a class="component-sort-link" href="{{ components_url({'sort': 'unit_price', 'direction': next_direction}) }}">{{ _('Estimated unit price') }}{% if sort_key == 'unit_price' %}<i class="bi-arrow-{{ 'down' if direction == 'desc' else 'up' }}-short"></i>{% endif %}</a></th>
            {% set next_direction = 'desc' if sort_key == 'supplier' and direction == 'asc' else 'asc' %}
            <th><a class="component-sort-link" href="{{ components_url({'sort': 'supplier', 'direction': next_direction}) }}">{{ _('Supplier') }}{% if sort_key == 'supplier' %}<i class="bi-arrow-{{ 'down' if direction == 'desc' else 'up' }}-short"></i>{% endif %}</a></th>
            {% set next_direction = 'desc' if sort_key == 'description' and direction == 'asc' else 'asc' %}
            <th><a class="component-sort-link" href="{{ components_url({'sort': 'description', 'direction': next_direction}) }}">{{ _('Description') }}{% if sort_key == 'description' %}<i class="bi-arrow-{{ 'down' if direction == 'desc' else 'up' }}-short"></i>{% endif %}</a></th>
        </tr>
    </thead>
    <tbody>
        {% for component in components %}
        {% set cad_filename = component_cad_filenames.get(component.uuid) %}
        <tr class="part-row" data-model="{{ cad_filename or '' }}" data-component-uuid="{{ component.uuid }}" data-component-name="{{ component.name }}" data-component-url="{{ url_for('component_view', uuid = component.uuid ) }}" data-download-url="{{ url_for('component_download_cad', uuid = component.uuid) if cad_filename else '' }}">
            <td class="component-actions-col">
                <div class="component-actions">
                <a title="{{ _('Open part details') }}" type="button" class="btn btn-outline-secondary btn-sm" href="{{ url_for('component_view', uuid = component.uuid ) }}">
                    <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/eye.svg') }}" width="18" height="18">
                </a>
                {% if cad_filename %}
                <a title="{{ _('Download CAD file') }}" type="button" class="btn btn-outline-secondary btn-sm" href="{{ url_for('component_download_cad', uuid = component.uuid) }}">
                    <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/download.svg') }}" width="18" height="18">
                </a>
                {% endif %}
                <a title="{{ _('Add part to My Bill of Materials') }}" type="button" data-uuid="{{ component.uuid }}" data-name="{{ component.name }}" class="btn btn-outline-secondary btn-sm add-part-to-selection-button">
                    <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/plus.svg') }}" width="20" height="20">
                </a>
                </div>
            </td>
            <td class="part-number-col">{{ component.number }}</td>
            <td style="min-width: 260px; max-width: 260px;">{{ component.name }}</td>
            <td style="min-width: 100px; max-width: 100px;">{{ component.unit_price }} {{ component.currency }}</td>
            <td style="min-width: 220px; max-width: 220px;">{{ component.supplier.name if component.supplier else "" }}</td>
            <td style="min-width: 300px; max-width: 300px;">{{ component.description }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock main_view_content_list %}

{% block main_view_content_preview %}
<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">
    <div id="main-view-preview-empty" class="component-preview-placeholder d-none flex-column align-items-center justify-content-center" aria-label="{{ _('No CAD file attached') }}">
        <img src="{{ url_for('static', filename='nut-bolt.png') }}" alt="">
        <div>OpenPartsLibrary</div>
        <div>{{ _('No CAD file attached') }}</div>
    </div>
    <iframe id="main-view-iframe" src="" frameborder="0" style="position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: none;"></iframe>
    <div id="main-view-preview-name" class="component-preview-name d-none">
        <span id="main-view-preview-name-text" class="component-preview-name-text"></span>
        <a id="main-view-preview-detail-button" class="component-preview-action-button btn btn-outline-secondary btn-sm" title="{{ _('Open part details') }}" href="#">
            <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/eye.svg') }}" width="18" height="18" alt="">
        </a>
        <a id="main-view-preview-download-button" class="component-preview-action-button btn btn-outline-secondary btn-sm" title="{{ _('Download CAD file') }}" href="#">
            <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/download.svg') }}" width="18" height="18" alt="">
        </a>
        <button id="main-view-preview-add-button" type="button" class="component-preview-action-button btn btn-outline-secondary btn-sm" title="{{ _('Add part to My Bill of Materials') }}">
            <img class="pb-1" src="{{ url_for('static', filename = 'bootstrap-icons-1.11.3/plus.svg') }}" width="18" height="18" alt="">
        </button>
    </div>
</div>
{% endblock main_view_content_preview %}

{% block script %}
{{ super() }}
<script>
var main_view_list_col = document.getElementById('main-view-list-col');
var main_view_preview_col = document.getElementById('main-view-preview-col');
var main_view_split = document.getElementById('main-view-split');

function setListView(){
    if (typeof switchToListView === "function") {
        switchToListView();
    }
}

function setPreviewView(){
    main_view_list_col.classList.remove('col-6');
    main_view_list_col.classList.remove('col-12');
    main_view_preview_col.classList.remove('col-6');
    main_view_preview_col.classList.remove('col-12');
    main_view_list_col.classList.add('col-6');
    main_view_preview_col.classList.add('col-6');
    main_view_preview_col.style.display = "block";
    if (main_view_split) {
        main_view_split.classList.add('preview-active');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    var iframe = document.getElementById('main-view-iframe');
    var emptyState = document.getElementById('main-view-preview-empty');
    var previewName = document.getElementById('main-view-preview-name');
    var previewNameText = document.getElementById('main-view-preview-name-text');
    var previewDetailButton = document.getElementById('main-view-preview-detail-button');
    var previewDownloadButton = document.getElementById('main-view-preview-download-button');
    var previewAddButton = document.getElementById('main-view-preview-add-button');
    var previewComponentUuid = "";
    var previewComponentName = "";

    if (previewAddButton) {
        previewAddButton.addEventListener("click", function(event) {
            event.stopPropagation();
            addComponentToSelection(previewComponentUuid, previewComponentName);
        });
    }

    document.querySelectorAll('.part-row').forEach(function(row, event) {
        row.addEventListener('click', function(event) {
            event.stopPropagation(); // prevent the row click from firing
            setPreviewView();

            // Remove 'selected-row' class from all rows
            document.querySelectorAll('.part-row').forEach(function(r) {
                r.classList.remove('selected-row');
            });

            // Add 'selected-row' class to the clicked row
            row.classList.add('selected-row');

            // Load CAD file name from data-model attribute and load it in the iframe
            var modelFile = this.getAttribute('data-model');
            var componentName = this.getAttribute('data-component-name') || "";
            var componentUuid = this.getAttribute('data-component-uuid') || "";
            var componentUrl = this.getAttribute('data-component-url') || "#";
            var downloadUrl = this.getAttribute('data-download-url') || "#";
            console.log("Clicked row, model filename: ", modelFile);
            if (modelFile) {
                emptyState.classList.add("d-none");
                emptyState.classList.remove("d-flex");
                iframe.style.display = "block";
                iframe.src = '/viewer/' + encodeURIComponent(modelFile);
                previewComponentUuid = componentUuid;
                previewComponentName = componentName;
                if (previewName) {
                    if (previewNameText) {
                        previewNameText.textContent = componentName;
                    }
                    if (previewDetailButton) {
                        previewDetailButton.href = componentUrl;
                    }
                    if (previewDownloadButton) {
                        previewDownloadButton.href = downloadUrl;
                    }
                    previewName.classList.remove("d-none");
                }
                console.log("Set iframe src to: " , iframe.src);
            } else {
                iframe.src = "";
                iframe.style.display = "none";
                emptyState.classList.remove("d-none");
                emptyState.classList.add("d-flex");
                previewComponentUuid = "";
                previewComponentName = "";
                if (previewName) {
                    if (previewNameText) {
                        previewNameText.textContent = "";
                    }
                    if (previewDetailButton) {
                        previewDetailButton.href = "#";
                    }
                    if (previewDownloadButton) {
                        previewDownloadButton.href = "#";
                    }
                    previewName.classList.add("d-none");
                }
            }
        }); 
    });
    const addButtons = document.querySelectorAll(".add-part-to-selection-button");
    
    // Add click listener to each button
    addButtons.forEach(button => {
        button.addEventListener("click", function(event) {
            event.stopPropagation(); // prevent the row click from firing
            var partUUID = this.getAttribute('data-uuid');
            var partName = this.getAttribute('data-name') || "";
            addComponentToSelection(partUUID, partName);
        });
    });
});
</script>
{% endblock script %}