{{ header }}

<header class="background-white bottom-margin-large">
	<div class="container-fluid">
		<div class="row no-space-xs">
			<div class="col-xs-12">
				<div class="content-box vertical-padding-large flex between-xs middle-xs">
					<div>
						<span class="text-x-large text-dark">{{ heading_title }}</span>
						<div class="adm-breadcrumb">
							{% for breadcrumb in breadcrumbs %}
								<i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
								<a class="text-x-small text-gray text-decoration-none" href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
							{% endfor %}
						</div>
					</div>
					{% if error_warning %}
						<div class="warning full-width top-margin-medium">{{ error_warning }}</div>
					{% endif %}
					{% if success %}
						<div class="success full-width top-margin-medium">{{ success }}</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</header>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<div class="content-box">
				<div class="row top-margin-medium">

					<div class="panel panel-default">
						<div class="section">
							<span class="text-warning" >Informações de uso da equipe de suporte/desenvolvimento para acompanhamento</span></br>
						</div>
						<div class="panel-heading">
							<div class="dashboard-section">
								<div class="dashboard-header">
								{# <div class="text-large "> #}
									<i class="fa fa-database"></i>
									Dashboard do Banco de Dados
								</div>
							</div>
						</div>
						<div
							class="panel-body">

							{# --- 1. Status Geral do Servidor MySQL --- #}
							<div class="section content-box">
								<div class="section-title">
									<i class="fa fa-server"></i>
									Status Geral do Servidor
								</div>
								{% if general_status.error is defined %}
									<div class="alert alert-danger">{{ general_status.error }}</div>
								{% else %}
									<div class="row">
										{% for cardD in cardsDatabase %}
											{% if cardD.title != '' %}
											<div class="col-sm-4">
												<div class="card visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
													<div class="card-body">
														<p class="text-dark text-bold text-large">{{ cardD.title }}</p>
														<p class="data_value">{{ cardD.value }}</p>
													</div>
												</div>
											</div>
											{% endif %}
										{% endfor %}
									</div>
								{% endif %}
							</div>

							<hr>

							{# --- 2. Uso de Armazenamento por Banco de Dados --- #}
							<div class="section">
								<div class="section-title">
									<i class="fa fa-server"></i>
									Uso de Armazenamento por Banco de Dados
								</div>
								{% if database_sizes.error is defined %}
									<div class="alert alert-danger">{{ database_sizes.error }}</div>
								{% else %}
									<div class="row">
										{% for db in database_sizes %}
											<div class="col-md-4 col-sm-6 mb-3">
												<div class="card h-100 visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
													<div class="card-body">
                                                        <p class="text-dark text-bold text-large">{{ db.database_name }} (MB)</p>
                                                        <p class="data_value">{{ db.total_mb | number_format(2) }}</p>
													</div>
												</div>
											</div>
										{% endfor %}
									</div>
								{% endif %}
							</div>

							<hr>

							{# --- 3. Top 10 Tabelas por Tamanho --- #}
							<div class="section">
								<div class="section-title">
									<i class="fa fa-server"></i>
									Top 10 Tabelas por Tamanho ({{ constant('DB_DATABASE') }})
								</div>
								{% if top_tables_by_size.error is defined %}
									<div class="alert alert-danger">{{ top_tables_by_size.error }}</div>
								{% else %}
									<table class="table table-bordered table-hover">
										<thead>
											<tr>
												<th>Tabela</th>
												<th>Tamanho Total (MB)</th>
											</tr>
										</thead>
										<tbody>
											{% for table in top_tables_by_size %}
												<tr>
													<td>{{ table.TABLE_NAME }}</td>
													<td class="text-right">{{ table.total_mb | number_format(2) }}</td>
												</tr>
											{% endfor %}
										</tbody>
									</table>
								{% endif %}
							</div>
						</div>

						<div class="panel-heading">
							<div class="dashboard-section">
								<div class="dashboard-header">
									<i class="fa fa-file-image"></i>
									Dashboard de Imagens
								</div>
							</div>
						</div>
						<div
							class="panel-body">
							{# --- 5. Pasta de Imagens --- #}
							<div class="section">
								{% if index_info.error is defined %}
									<div class="alert alert-danger">{{ index_info.error }}</div>
								{% else %}
									<div class="row">
										{% for cardI in cardsImages %}
											{% if cardI.title != '' %}
											<div class="col-sm-4">
												<div class="card visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
													<div class="card-body">
														<p class="text-dark text-bold text-large">{{ cardI.title }}</p>
														<p class="data_value">{{ cardI.value }}</p>
													</div>
												</div>
											</div>
											{% endif %}
										{% endfor %}
									</div>
                                    <div class="col-sm-12">
										<table class="table table-bordered table-hover">
											<thead>
												<tr>
													<th>Arquivos</th>
												</tr>
											</thead>
											<tbody>
												{% for file in lista_maiores_arquivos %}
													<tr>
														<td>{{ file.path }}</td>
													</tr>
												{% endfor %}
											</tbody>
										</table>
                                    </div>
								{% endif %}
							</div>
						</div>
						<div class="panel-heading">
							<div class="dashboard-section">
								<div class="dashboard-header">
									<i class="fa fa-archive"></i>
									Dashboard de Logs
								</div>
							</div>
						</div>
						<div
							class="panel-body">
							{# ---6. Pasta de Logs --- #}
							<div class="section">
								{% if index_info.error is defined %}
									<div class="alert alert-danger">{{ index_info.error }}</div>
								{% else %}
									<div class="row">
										{% for cardL in cardsLogs %}
											{% if cardL.title != ''%}
											<div class="col-sm-4">
												<div class="card visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
													<div class="card-body">
														<p class="text-dark text-bold text-large">{{ cardL.title }}</p>
														<p class="data_value">{{ cardL.value }}</p>
													</div>
												</div>
											</div>
											{% endif %}
										{% endfor %}
									</div>
                                    <div class="col-sm-12">
										<table class="table table-bordered table-hover">
											<thead>
												<tr>
													<th>Arquivos</th>
												</tr>
											</thead>
											<tbody>
												{% for fileL in lista_maiores_logs %}
													<tr>
														<td>{{ fileL.path }}</td>
													</tr>
												{% endfor %}
											</tbody>
										</table>
                                    </div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{{ footer }}

<style>
	/* Estilos básicos para as novas seções */

	.text-right {
		text-align: right;
	}

	.text-left {
		text-align: left;
	}

	.section {
		background-color: rgb(210, 227, 240);
		border: 1px solid #d6e9f8;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 25px;
	}

	.section h2 {
		color: #0056b3;
		margin-top: 0;
		margin-bottom: 15px;
	}

	.alert {
		padding: 10px;
		background-color: #ffe0b2;
		border: 1px solid #ff9800;
		border-radius: 5px;
		color: #e65100;
		margin-top: 15px;
	}

	.section-title {
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: 15px;
		color: #2c3e50;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.card {
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		padding: 15px;
		border: 1px solid #ddd;
	}

    .card-body {
        height: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

	.dashboard-header {
		font-size: 1.25rem;
		font-weight: bold;
		border-bottom: 2px solid #e0e0e0;
		padding-bottom: 8px;
		margin-bottom: 20px;
		color: #37474f;
	}

	.section {
		background-color: #f9fbfc;
		border: 1px solid #e1e5ea;
	}

	table {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		width: 100%;
	}

	td,
	th {
		border: 1px solid #dddddd;
		text-align: left;
		padding: 8px;
	}

	tr:nth-child(even) {
		background-color: #dddddd;
	}

    .data_value {
        margin-top: 20px;
        padding: 0;
        font-size: 28px;
        color:rgb(21, 86, 151);
        text-align: center;
    }

</style>
