@extends('layout.home', ['valor' => 'dispositivos'])

@section('content')
<div class="text-left mb-4">
    <a href="{{ url()->previous() }}" class="btn btn-secondary">Volver</a>
    <h1>Listado de archivos</h1>
</div>
<style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 18px;
            text-align: left;
        }
        th, td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    </style>

    <table>
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Horario</th>
                <th>Nombre de archivo</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>03/01/2025</td>
                <td>11:43</td>
                <td>Arhivo de prueba 1</td>
                <td>
                    <div style="display: flex; gap: 10px;">
                        <a href="#" style="text-decoration: none; color: black;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                            <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/>
                            <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/>
                            </svg>
                        </a>
                        <a href="#" style="text-decoration: none; color: black;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cloud-arrow-down-fill" viewBox="0 0 16 16">
                            <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708"/>
                            </svg>
                        </a>
                    </div>
                </td>    
            </tr>
            <tr>
                <td>03/01/2025</td>
                <td>11:45</td>
                <td>Arhivo de prueba 2</td>
                <td>
                    <i class="icon-edit"></i>
                    <i class="icon-delete"></i>
                    <i class="icon-view"></i>
                </td>
            </tr>
            <tr>
                <td>03/01/2025</td>
                <td>11:47</td>
                <td>Arhivo de prueba 3</td>
                <td>
                    <i class="icon-edit"></i>
                    <i class="icon-delete"></i>
                    <i class="icon-view"></i>
                </td>
            </tr>
            <tr>
                <td>03/01/2025</td>
                <td>11:53</td>
                <td>Arhivo de prueba 4</td>
                <td>
                    <i class="icon-edit"></i>
                    <i class="icon-delete"></i>
                    <i class="icon-view"></i>
                </td>
            </tr>
            <tr>
                <td>03/01/2025</td>
                <td>11:55</td>
                <td>Arhivo de prueba 5</td>
                <td>
                    <i class="icon-edit"></i>
                    <i class="icon-delete"></i>
                    <i class="icon-view"></i>
                </td>
            </tr>
        </tbody>
    </table>
@endsection