{% extends '/layout/customer_layout.html.twig' %}

{% block title %}Files{% endblock %}

{% block content %}
    <div class="row d-flex justify-content-center">
        <div class="col-xl-8">
            <div class="card card-body">
                <h5>Files ({{ files|length }}):</h5>
                {% if files|length > 0 %}
                    <div class="card card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover table-sm">
                                <thead class="thead-light">
                                <tr>
                                    <th>File</th>
                                    <th>Size</th>
                                    <th>Upload Date</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for file in files %}
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                {{ include('components/file_icon.html.twig', {'extension': file.filename|split('.')|last}) }}
                                                <span class="ms-2">{{ file.originalFilename }}</span>
                                            </div>
                                        </td>
                                        <td>{{ (file.size / 1024)|number_format(2) }}
                                            KB
                                        </td>
                                        <td>{{ file.uploadedAt|dtz }}</td>
                                        <td>
                                            <a href="{{ path('partnerarea_file_view', {'id': file.id}) }}"
                                               class="text-primary" target="_blank" title="View">
                                                <svg class="icon icon-xs" fill="none" viewbox="0 0 24 24" stroke-width="1.5"
                                                     stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                </svg>
                                            </a>
                                            <a href="{{ path('partnerarea_file_download', {'id': file.id}) }}"
                                               class="text-success ms-1" download title="Download">
                                                <svg class="icon icon-xs" fill="none" viewbox="0 0 24 24" stroke-width="1.5"
                                                     stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
                                                </svg>
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% else %}
                    <p class="text-muted">No files uploaded.</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}