{% 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">
          Infrastructure Overview
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary d-none d-sm-inline-block">
            <span class="ti ti-plus me-2"></span>
            New Subnet
          </a>
          <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary d-none d-sm-inline-block">
            <span class="ti ti-plus me-2"></span>
            New Server
          </a>
          <a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
            <span class="ti ti-plus me-2"></span>
            New Application
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Hierarchical View -->
  <div class="row mt-3">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Network Infrastructure</h3>
        </div>
        <div class="card-body">
          <!-- Subnets -->
          {% if hierarchy.subnets %}
          {% for subnet in hierarchy.subnets %}
          <div class="subnet-container mb-4">
            <div class="subnet-header d-flex align-items-center p-2 bg-azure-lt rounded">
              <span class="ti ti-network me-2"></span>
              <h4 class="m-0">
                <a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="text-reset">
                  {{ subnet.cidr }}
                </a>
                {% if subnet.location %}
                <small class="text-muted ms-2">({{ subnet.location }})</small>
                {% endif %}
                {% if subnet.description %}
                <small class="text-muted ms-2">{{ subnet.description }}</small>
                {% endif %}
              </h4>
              <div class="ms-auto">
                <a href="{{ url_for('dashboard.server_new') }}?subnet_id={{ subnet.id }}"
                  class="btn btn-sm btn-outline-primary">
                  <span class="ti ti-plus me-1"></span> Add Server
                </a>
              </div>
            </div>

            <!-- Servers in this subnet -->
            {% if subnet.servers %}
            <div class="ps-4 mt-2">
              {% for server in subnet.servers %}
              <div class="server-container mb-3 border-start ps-3">
                <div class="server-header d-flex align-items-center p-2 bg-light rounded">
                  <span class="ti ti-server me-2"></span>
                  <h5 class="m-0">
                    <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
                      {{ server.hostname }}
                    </a>
                    <small class="text-muted ms-2">{{ server.ip_address }}</small>
                  </h5>
                  <div class="ms-auto">
                    <a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
                      class="btn btn-sm btn-outline-primary">
                      <span class="ti ti-plus me-1"></span> Add App
                    </a>
                  </div>
                </div>

                <!-- Apps on this server -->
                {% if server.apps %}
                <div class="ps-4 mt-2">
                  {% for app in server.apps %}
                  <div class="app-container mb-2 border-start ps-3">
                    <div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
                      <span class="ti ti-app-window me-2"></span>
                      <h6 class="m-0">
                        <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
                          {{ app.name }}
                        </a>
                      </h6>
                      <div class="ms-2">
                        {% for port in app.ports %}
                        <span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
                {% else %}
                <div class="ps-4 mt-2">
                  <div class="text-muted fst-italic">No applications</div>
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            {% else %}
            <div class="ps-4 mt-2">
              <div class="text-muted fst-italic">No servers in this subnet</div>
            </div>
            {% endif %}
          </div>
          {% endfor %}
          {% endif %}

          <!-- Standalone Servers -->
          {% if hierarchy.standalone_servers %}
          <div class="standalone-servers-container mb-4">
            <div class="subnet-header d-flex align-items-center p-2 bg-yellow-lt rounded">
              <span class="ti ti-server me-2"></span>
              <h4 class="m-0">Standalone Servers</h4>
            </div>

            <div class="ps-4 mt-2">
              {% for server in hierarchy.standalone_servers %}
              <div class="server-container mb-3 border-start ps-3">
                <div class="server-header d-flex align-items-center p-2 bg-light rounded">
                  <span class="ti ti-server me-2"></span>
                  <h5 class="m-0">
                    <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
                      {{ server.hostname }}
                    </a>
                    <small class="text-muted ms-2">{{ server.ip_address }}</small>
                  </h5>
                  <div class="ms-auto">
                    <a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
                      class="btn btn-sm btn-outline-primary">
                      <span class="ti ti-plus me-1"></span> Add App
                    </a>
                  </div>
                </div>

                <!-- Apps on this server -->
                {% if server.apps %}
                <div class="ps-4 mt-2">
                  {% for app in server.apps %}
                  <div class="app-container mb-2 border-start ps-3">
                    <div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
                      <span class="ti ti-app-window me-2"></span>
                      <h6 class="m-0">
                        <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
                          {{ app.name }}
                        </a>
                      </h6>
                      <div class="ms-2">
                        {% for port in app.ports %}
                        <span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
                {% else %}
                <div class="ps-4 mt-2">
                  <div class="text-muted fst-italic">No applications</div>
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
          </div>
          {% endif %}

          {% if not hierarchy.subnets and not hierarchy.standalone_servers %}
          <div class="text-center py-4">
            <div class="empty">
              <div class="empty-img">
                <span class="ti ti-database-off" style="font-size: 3rem;"></span>
              </div>
              <p class="empty-title">No infrastructure defined yet</p>
              <p class="empty-subtitle text-muted">
                Start by creating a subnet or a server to organize your infrastructure.
              </p>
              <div class="empty-action">
                <a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary">
                  <span class="ti ti-plus me-2"></span>
                  Create Subnet
                </a>
                <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary ms-2">
                  <span class="ti ti-plus me-2"></span>
                  Create Server
                </a>
              </div>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .subnet-container,
  .server-container,
  .app-container {
    transition: all 0.3s ease;
  }

  .border-start {
    border-left: 2px solid rgba(98, 105, 118, 0.16) !important;
  }

  .server-container:hover .border-start,
  .app-container:hover .border-start {
    border-left-color: var(--tblr-primary) !important;
  }

  .subnet-header,
  .server-header,
  .app-header {
    transition: all 0.2s ease;
  }

  .subnet-header:hover,
  .server-header:hover,
  .app-header:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
</style>
{% endblock %}