{% extends "base.html" %}

{% block title %}{{ _('System Info') }} - {{ app_name }}{% endblock %}

{% block content %}
{% from "_components.html" import page_header %}
<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			{{ page_header('fas fa-info-circle', _('System Information'), _('System status and metrics'), None) }}
		</div>
	</div>

	<div class="row mb-4">
		<div class="col-md-3 col-sm-6 mb-3">
			<div class="card border-0 shadow-sm h-100 summary-card">
				<div class="card-body p-3 d-flex align-items-center">
					<div class="summary-icon bg-primary bg-opacity-10 text-primary"><i class="fas fa-users"></i></div>
					<div class="ms-3">
						<div class="summary-label">{{ _('Total Users') }}</div>
						<div class="summary-value">{{ total_users }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 mb-3">
			<div class="card border-0 shadow-sm h-100 summary-card">
				<div class="card-body p-3 d-flex align-items-center">
					<div class="summary-icon bg-success bg-opacity-10 text-success"><i class="fas fa-project-diagram"></i></div>
					<div class="ms-3">
						<div class="summary-label">{{ _('Total Projects') }}</div>
						<div class="summary-value">{{ total_projects }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 mb-3">
			<div class="card border-0 shadow-sm h-100 summary-card">
				<div class="card-body p-3 d-flex align-items-center">
					<div class="summary-icon bg-info bg-opacity-10 text-info"><i class="fas fa-clock"></i></div>
					<div class="ms-3">
						<div class="summary-label">{{ _('Time Entries') }}</div>
						<div class="summary-value">{{ total_entries }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6 mb-3">
			<div class="card border-0 shadow-sm h-100 summary-card">
				<div class="card-body p-3 d-flex align-items-center">
					<div class="summary-icon bg-warning bg-opacity-10 text-warning"><i class="fas fa-play"></i></div>
					<div class="ms-3">
						<div class="summary-label">{{ _('Active Timers') }}</div>
						<div class="summary-value">{{ active_timers }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row justify-content-center">
		<div class="col-lg-8">
			<div class="card">
				<div class="card-header">
					<i class="fas fa-info-circle me-2"></i> {{ _('System Details') }}
				</div>
				<div class="card-body">
					<div class="row mb-3">
						<div class="col-sm-5 text-muted">{{ _('Total Users') }}</div>
						<div class="col-sm-7"><strong>{{ total_users }}</strong></div>
					</div>
					<div class="row mb-3">
						<div class="col-sm-5 text-muted">{{ _('Total Projects') }}</div>
						<div class="col-sm-7"><strong>{{ total_projects }}</strong></div>
					</div>
					<div class="row mb-3">
						<div class="col-sm-5 text-muted">{{ _('Time Entries') }}</div>
						<div class="col-sm-7"><strong>{{ total_entries }}</strong></div>
					</div>
					<div class="row mb-3">
						<div class="col-sm-5 text-muted">{{ _('Active Timers') }}</div>
						<div class="col-sm-7"><strong>{{ active_timers }}</strong></div>
					</div>
					<div class="row">
						<div class="col-sm-5 text-muted">{{ _('Database Size') }}</div>
						<div class="col-sm-7"><span class="badge bg-info">{{ db_size_mb }} MB</span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}


