{% 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">
          {{ server.hostname }}
        </h2>
        <div class="text-muted mt-1">{{ server.ip_address }}</div>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link">
          Back to Servers
        </a>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Documentation</h3>
        </div>
        <div class="card-body markdown-body">
          {% if server.documentation %}
          {{ markdown(server.documentation)|safe }}
          {% else %}
          <div class="text-center text-muted py-3">
            No documentation available for this server.
          </div>
          {% endif %}
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">
          <div class="d-flex justify-content-between align-items-center">
            <h3 class="card-title">Applications</h3>
            <a href="{{ url_for('dashboard.app_new') }}" class="btn btn-sm btn-primary">
              Add Application
            </a>
          </div>
        </div>
        <div class="card-body">
          {% if apps %}
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>Name</th>
                <th>Ports</th>
              </tr>
            </thead>
            <tbody>
              {% for app in apps %}
              <tr>
                <td>{{ app.name }}</td>
                <td>
                  {% for port in app.ports %}
                  <span class="badge bg-primary">
                    {{ port.port }}/{{ port.type }} {% if port.desc %}({{ port.desc }}){% endif %}
                  </span>
                  {% endfor %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <div class="text-center py-3">
            <div class="mb-3">No applications registered for this server</div>
            <a href="{{ url_for('dashboard.app_new') }}" class="btn btn-outline-primary">
              Add Application
            </a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Server Information</h3>
        </div>
        <div class="card-body">
          <div class="mb-2">
            <strong>Hostname:</strong> {{ server.hostname }}
          </div>
          <div class="mb-2">
            <strong>IP Address:</strong> {{ server.ip_address }}
          </div>
          <div class="mb-2">
            <strong>Subnet:</strong> {{ server.subnet.cidr if server.subnet else 'N/A' }}
          </div>
          <div class="mb-2">
            <strong>Location:</strong> {{ server.subnet.location if server.subnet else 'N/A' }}
          </div>
          <div class="mb-2">
            <strong>Created:</strong> {{ server.created_at.strftime('%Y-%m-%d') }}
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">
          <h3 class="card-title">Open Ports</h3>
        </div>
        <div class="card-body">
          {% if server.get_open_ports() %}
          <div class="list-group list-group-flush">
            {% for port in server.get_open_ports() %}
            <div class="list-group-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="badge bg-primary">{{ port.port }}</span>
                </div>
                <div class="col">
                  <div class="text-truncate">
                    {{ port.type|upper }}
                    {% if port.desc %}
                    <span class="text-muted">{{ port.desc }}</span>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center text-muted py-3">
            No open ports detected.
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}