@extends('layouts.main')
@section('content')

<div class="dashboard-container">
    <!-- Contenedor 1: Hogares y Miembros -->
    <div class="container-horizontal">
        <ul class="nav-tabs">
            <li class="active"><a href="#hogares" class="tab-link">Equipos</a></li>
            <li><a href="#miembros" class="tab-link">Miembros</a></li>
        </ul>

        <div id="hogares" class="tab-content active">
            <!-- Contenido de Hogares -->
            <p>Lista de Equipos Asignados</p>
        </div>
        <div id="miembros" class="tab-content">
            <!-- Contenido de Miembros -->
            <p>Lista de Miembros del Hogar</p>
        </div>
    </div>

    <!-- Contenedor 2: Formularios -->
    <div class="container-horizontal">
        <ul class="nav-tabs">
            <li class="active"><a href="#asignados" class="tab-link">Asignados</a></li>
            <li><a href="#completos" class="tab-link">Completos</a></li>
            <li><a href="#incompletos" class="tab-link">Incompletos</a></li>
            <li><a href="#cancelados" class="tab-link">Cancelados</a></li>
        </ul>

        <div id="asignados" class="tab-content active">
            <!-- Contenido de Formularios Asignados -->
            <p>Formularios Asignados</p>
        </div>
        <div id="completos" class="tab-content">
            <!-- Contenido de Formularios Completos -->
            <p>Formularios Completos</p>
        </div>
        <div id="incompletos" class="tab-content">
            <!-- Contenido de Formularios Incompletos -->
            <p>Formularios Incompletos</p>
        </div>
        <div id="cancelados" class="tab-content">
            <!-- Contenido de Formularios Cancelados -->
            <p>Formularios Cancelados</p>
        </div>
    </div>

    <!-- Contenedor 3: Borradores -->
    <div class="container-vertical">
        <h4>Borradores Locales</h4>
        <p>Lista de Formularios Guardados como Borrador</p>
    </div>
</div>
@endsection