{% extends "page.html" %}


{% block style %}
<style>
.component-detail-scroll {
    min-height: 0;
}

.component-viewer-frame {
    display: block;
    width: 100%;
    height: 400px;
    border: 1px solid #dadada;
}

.component-viewer-placeholder {
    width: 100%;
    height: 400px;
    border: 1px solid #dadada;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #5f6b7a;
    text-align: center;
}

.component-viewer-placeholder img {
    width: 72px;
    height: 72px;
    filter: brightness(0.5);
}

.component-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.component-detail-section-title {
    margin-top: 2rem;
}

.component-detail-list-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .component-detail-scroll {
        padding: 0.75rem !important;
    }

    .component-viewer-frame {
        height: 320px;
    }

    .component-viewer-placeholder {
        height: 320px;
    }
}
</style>
{% endblock style %}

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

{% block view_buttons %}
<!-- Add your view buttons here -->
<!-- ... -->
{% endblock view_buttons %}

{% block main_view_content %}
<div class="container p-3 m-0 component-detail-scroll" style="background-color: white; width: 100%; min-width: 100%; overflow-y: auto;">
   <div class="container-fluid p-3">
    <div class="mb-3">
        <a type="button" class="btn btn-outline-secondary btn-sm" href="{{ url_for('components') }}">&larr; {{ _('All parts') }}</a>
    </div>
    <div class="row mb-4">
        <!-- 3D View -->
        <div class="col-12 col-md-4">
            {% if component_cad_filename %}
            <iframe class="component-viewer-frame" src="{{ url_for('viewer', filename = component_cad_filename) }}"></iframe>
            {% else %}
            <div class="component-viewer-placeholder" 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>
            {% endif %}
        </div>
        <!-- Properties -->
        <div class="col-12 col-md-8">
            <p>{{ _('Part') }}</p>
            <h1 class="mb-3">{{ component.name }}</h1>
            <div class="component-detail-actions">
                <button title="{{ _('Add part to My Bill of Materials') }}" type="button" class="btn btn-outline-secondary" style="padding-left: 10px; padding-right: 10px;" onclick="addComponentToSelection('{{ component.uuid }}')">
                    <i class="bi-plus-lg" style="padding-right: 6px;"></i>{{ _('Add to My Bill of Materials') }}
                </button>
                {% if component_cad_filename %}
                <a title="{{ _('Download CAD file') }}" type="button" class="btn btn-outline-secondary" style="padding-left: 10px; padding-right: 10px;" href="{{ url_for('component_download_cad', uuid = component.uuid) }}">
                    <i class="bi-download" style="padding-right: 6px;"></i>{{ _('Download CAD') }}
                </a>
                {% endif %}
            </div>
            <table class="table table-striped mb-0" style="outline-style: solid; outline-color: lightgray; outline-width: 1px;">
                <tbody>
                    <tr>
                        <th>{{ _('Name') }}</th>
                        <td>{{ component.name }}</td>
                    </tr>
                    <tr>
                        <th>{{ _('Description') }}</th>
                        <td>{{ component.description }}</td>
                    </tr>
                    <tr>
                        <th>{{ _('Part number') }}</th>
                        <td>{{ component.number }}</td>
                    </tr>
                    <tr>
                        <th>{{ _('Supplier') }}</th>
                        <td>{{ component.supplier.name }}</td>
                    </tr>
                    <tr>
                        <th>{{ _('Estimated unit price') }}</th>
                        <td>{{ component.unit_price }} {{ component.currency }}</td>
                    </tr>
                </tbody>
            </table>  
        </div>
    </div>
    <h2 class="component-detail-section-title">{{ _('Attached Files') }}</h2>
    <p class="mb-2">{{ ngettext('%(num)s file found.', '%(num)s files found.', files|length) }}</p>
    <table class="table table-striped" style="outline-style: solid; outline-color: lightgray; outline-width: 1px;">
        <thead>
            <tr>
                <th>{{ _('Name') }}</th>
                <th>{{ _('Last modified') }}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for file in files %}
            <tr>
                <td>{{ file.name }}</td>
                <td>{{ file.date_modified }}</td>
                    <td class="text-end">
                        <div class="component-detail-list-actions">
                            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('download_file', file_uuid = file.uuid) }}" title="{{ _('Download') }}" aria-label="{{ _('Download') }}"><i class="bi-download"></i></a>
                        </div>
                    </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="3" class="text-muted">{{ _('No files attached.') }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <h2 class="component-detail-section-title">{{ _('Used in BOM') }}</h2>
    <p class="mb-2">{{ ngettext('%(num)s BOM found.', '%(num)s BOMs found.', used_in_boms|length) }}</p>
    <table class="table table-striped" style="outline-style: solid; outline-color: lightgray; outline-width: 1px;">
        <thead>
            <tr>
                <th>{{ _('BOM number') }}</th>
                <th>{{ _('Name') }}</th>
                <th>{{ _('Quantity') }}</th>
                <th>{{ _('Estimated cost') }}</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for used_in_bom in used_in_boms %}
            <tr>
                <td>{{ used_in_bom.bom.number }}</td>
                <td>{{ used_in_bom.bom.name }}</td>
                <td>{{ used_in_bom.quantity }}</td>
                <td>{{ used_in_bom.cost }}</td>
                <td class="text-end">
                    <div class="component-detail-list-actions">
                        <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('bom_view', bom_id = used_in_bom.bom.id) }}" title="{{ _('BOM details') }}" aria-label="{{ _('BOM details') }}"><i class="bi bi-eye"></i></a>
                        <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('bom_download', bom_id = used_in_bom.bom.id) }}" title="{{ _('Download') }}" aria-label="{{ _('Download') }}"><i class="bi-download"></i></a>
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="5" class="text-muted">{{ _('This part is not used in any BOM.') }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
</div>

{% endblock main_view_content %}

{% block script %}{% endblock script %}