{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">Dashboard</h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary d-none d-sm-inline-block">
            <i class="ti ti-plus"></i> New Server
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-4">
      <div class="card stats-card">
        <div class="card-body p-4 text-center">
          <div class="h1 m-0">{{ server_count }}</div>
          <div class="text-muted mb-3">Servers</div>
          <div class="d-flex justify-content-center">
            <a href="{{ url_for('dashboard.server_list') }}" class="btn btn-sm btn-primary">
              View All
            </a>
            <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-sm btn-outline-primary ms-2">
              Add New
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card stats-card">
        <div class="card-body p-4 text-center">
          <div class="h1 m-0">{{ subnet_count }}</div>
          <div class="text-muted mb-3">Subnets</div>
          <div class="d-flex justify-content-center">
            <a href="{{ url_for('ipam.ipam_home') }}" class="btn btn-sm btn-primary">
              View All
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card stats-card">
        <div class="card-body p-4 text-center">
          <div class="h1 m-0">{{ app_count }}</div>
          <div class="text-muted mb-3">Applications</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Recent Servers</h3>
        </div>
        <div class="card-body">
          {% if latest_servers %}
          <div class="list-group list-group-flush">
            {% for server in latest_servers %}
            <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
              class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar bg-primary text-white">
                    {{ server.hostname[0].upper() }}
                  </span>
                </div>
                <div class="col text-truncate">
                  <div class="d-block text-truncate">{{ server.hostname }}</div>
                  <div class="text-muted text-truncate small">{{ server.ip_address }}</div>
                </div>
              </div>
            </a>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-3">
            <div class="mb-3">No servers added yet</div>
            <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-outline-primary">
              Add Your First Server
            </a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Subnet Utilization</h3>
        </div>
        <div class="card-body">
          {% if subnets %}
          {% for subnet in subnets %}
          <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
              <div>{{ subnet.cidr }}</div>
              <div>{{ subnet.used_ips }} / 254 IPs</div>
            </div>
            <div class="progress">
              <div class="progress-bar bg-primary" style="width: {{ subnet.usage_percent }}%"></div>
            </div>
          </div>
          {% endfor %}
          {% else %}
          <div class="text-center py-3">
            <div class="mb-3">No subnets added yet</div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}