{% 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">
          {{ title }}
        </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>
        </div>
      </div>
    </div>
  </div>

  <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">
          {% if hierarchy.locations %}
          {% for location_name, location_data in hierarchy.locations.items() %}
          <div class="location-container mb-5">
            <div class="location-header d-flex align-items-center p-2 bg-primary-lt rounded">
              <span class="ti ti-building me-2"></span>
              <h3 class="m-0">{{ location_name }}</h3>
            </div>

            <!-- Subnets in this location -->
            {% if location_data.subnets %}
            <div class="ms-4 mt-3">
              <h4 class="mb-3">Subnets</h4>
              {% for subnet in location_data.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.description is defined and 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="ms-4 mt-2">
                  {% for server in subnet.servers %}
                  <div class="server-container mb-3">
                    <div class="server-header d-flex align-items-center p-2 bg-light rounded border-start border-3">
                      <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-secondary">
                          <span class="ti ti-plus me-1"></span> Add App
                        </a>
                      </div>
                    </div>

                    <!-- Apps on this server -->
                    {% if server.apps %}
                    <div class="ms-4 mt-1">
                      {% for app in server.apps %}
                      <div class="app-container mb-2">
                        <div class="app-header d-flex align-items-center p-2 bg-white rounded border-start border-3">
                          <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>
                            {% if app.ports %}
                            <small class="text-muted ms-2">
                              Ports:
                              {% for port in app.ports %}
                              <span class="badge bg-blue-lt">{{ port.port }}/{{ port.protocol }}</span>
                              {% endfor %}
                            </small>
                            {% endif %}
                          </h6>
                        </div>
                      </div>
                      {% endfor %}
                    </div>
                    {% endif %}
                  </div>
                  {% endfor %}
                </div>
                {% else %}
                <div class="ms-4 mt-2 text-muted">
                  <em>No servers in this subnet</em>
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            {% endif %}

            <!-- Standalone servers in this location -->
            {% if location_data.standalone_servers %}
            <div class="ms-4 mt-3">
              <h4 class="mb-3">Standalone Servers</h4>
              {% for server in location_data.standalone_servers %}
              <div class="server-container mb-3">
                <div class="server-header d-flex align-items-center p-2 bg-light rounded border-start border-3">
                  <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>
                    <span class="badge bg-purple-lt ms-2">Public IP</span>
                  </h5>
                  <div class="ms-auto">
                    <a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
                      class="btn btn-sm btn-outline-secondary">
                      <span class="ti ti-plus me-1"></span> Add App
                    </a>
                  </div>
                </div>

                <!-- Apps on this server -->
                {% if server.apps %}
                <div class="ms-4 mt-1">
                  {% for app in server.apps %}
                  <div class="app-container mb-2">
                    <div class="app-header d-flex align-items-center p-2 bg-white rounded border-start border-3">
                      <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>
                        {% if app.ports %}
                        <small class="text-muted ms-2">
                          Ports:
                          {% for port in app.ports %}
                          <span class="badge bg-blue-lt">{{ port.port }}/{{ port.protocol }}</span>
                          {% endfor %}
                        </small>
                        {% endif %}
                      </h6>
                    </div>
                  </div>
                  {% endfor %}
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          {% endfor %}
          {% else %}
          <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>
  .location-container,
  .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;
  }

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

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