{% extends "home.html" %}


{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">


{% load static %}
<link rel="stylesheet" href="{% static 'datahub/css/datahub.css' %}">

{% endblock %}

{% block content %}

<div class="page-container">

    <div class="header-datahub" >
        <h1>DataHub de la Compañía <i class="fa-solid fa-database"></i></h1>
        <p>Portal de datos corporativo. Busca directamente un modelo o explora por categorías.</p>
        <br>
        <input type="text" placeholder="Busca por tabla o concepto... (ej. 'clientes', 'ventas')" class="input-busqueda" id="input-busqueda">
    </div>

    <div class="json-editor">
        <textarea id="jsonInput">
{
  "tablas": [
    {
      "nombre": "Nombre de la vista/consulta.",
      "nombre_sap": "Lista de todas las tablas SAP usadas en FROM y JOIN, separadas por coma.",
      "descripcion": "Descripción concisa del propósito de negocio de la vista.",
      "tipo": "Tipo de tabla (Ej: DIM, FACT).",
      "origen": "SAP Business One",
      "actualizacion": "Frecuencia en formato 'Número Unidad' (Ej: 1 Hora, 24 Horas).",
      "area": "Área de negocio a la que pertenecen los datos (Ej: Datos Maestros, Ventas).",
      "campos": [
        {
          "nombre": "El ALIAS del campo en la cláusula SELECT.",
          "descripcion": "Descripción funcional del campo. Si es un cálculo, explica la lógica.",
          "tipo_dato": "El tipo de dato de la columna en PostgreSQL (Ej: VARCHAR, INTEGER, TIMESTAMP).",
          "relaciones": [
            {
              "tabla_destino": "Tabla con la que se relaciona el campo.",
              "campo_destino": "Campo correspondiente en la tabla de destino.",
              "descripcion": "Propósito de la relación."
            }
          ]
        }
      ]
    }
  ]
}
        </textarea>
        <button id="btnAgregar">Agregar</button>
    </div>

    <div class="cards-columns">
        <div class="content-card" id="col-dim">
            <h2>Datos Maestros (Dimensiones)</h2>
            <div id="cards-dim"></div>
        </div>

        <div class="content-card" id="col-fact">
            <h2>Tablas de Hechos (Transacciones)</h2>
            <div id="cards-fact"></div>
        </div>
    </div>


    <div id="sidebar_datahub" class="sidebar_datahub">
        <div class="sidebar_datahub-header">
            <h2 id="sidebar_datahub-titulo">Detalles</h2>
            <button id="cerrarsidebar_datahub"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="sidebar_datahub-content" id="sidebar_datahub-contenido"></div>
    </div>
    <div id="overlay" class="overlay"></div>
</div>
{% endblock %}
<!-- ===================== Librerías globales ===================== -->
{% block extra_js %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="module" src="{% static 'datahub/js/datahub.js' %}"></script>
{% endblock %}