{% 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">
        <div class="page-pretitle">
          Server Details
        </div>
        <h2 class="page-title">
          {{ server.hostname }}
        </h2>
      </div>
      <div class="col-auto ms-auto">
        <div class="btn-list">
          <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
            <span class="ti ti-edit me-2"></span>Edit Server
          </a>
          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
            <span class="ti ti-trash me-2"></span>Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-4">
      <!-- Server Information -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Basic Information</h3>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <div class="form-label">IP Address</div>
            <div>{{ server.ip_address }}</div>
          </div>
          <div class="mb-3">
            <div class="form-label">Subnet</div>
            <div>
              <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}">
                {{ server.subnet.cidr }}
              </a>
              ({{ server.subnet.location }})
            </div>
          </div>
          <div class="mb-3">
            <div class="form-label">Scan Status</div>
            <div>{{ server.last_scan or 'Not scanned yet' }}</div>
          </div>
        </div>
      </div>

      <!-- Port Usage Map -->
      <div class="card mt-3">
        <div class="card-header d-flex align-items-center">
          <h3 class="card-title">Port Usage</h3>
          <div class="ms-auto">
            <button id="get-random-port" class="btn btn-sm btn-outline-primary">
              <i class="ti ti-clipboard-copy me-1"></i> Get Free Port
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="port-map">
            <div class="port-map-grid">
              {% for i in range(1, 101) %}
              {% set port_num = 8000 + i - 1 %}
              {% set port_used = false %}
              {% set port_app = "" %}
              {% set port_color = "" %}
              {% set tooltip = "" %}

              {% for app in server.apps %}
              {% for port in app.ports %}
              {% if port.port_number == port_num %}
              {% set port_used = true %}
              {% set port_app = app.name %}
              {% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
              {% set tooltip = app.name ~ " - " ~ port.description %}
              {% endif %}
              {% endfor %}
              {% endfor %}

              <div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
                data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
                {{ port_num }}
              </div>
              {% endfor %}
            </div>
          </div>
          <div class="mt-2 text-muted small">
            <div class="d-flex flex-wrap">
              <div class="me-3"><span class="badge bg-light">Port</span> Free</div>
              <div><span class="badge bg-primary">Port</span> Used</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <!-- Documentation section -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Documentation</h3>
        </div>
        <div class="card-body markdown-content">
          {% if server.documentation %}
          {{ server.documentation|markdown|safe }}
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <span class="ti ti-file-text"></span>
            </div>
            <p class="empty-title">No documentation available</p>
            <p class="empty-subtitle text-muted">
              Add documentation to this server to keep track of important information.
            </p>
            <div class="empty-action">
              <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
                <span class="ti ti-edit me-2"></span> Add Documentation
              </a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Applications section with collapsible cards -->
      <div class="card mt-3">
        <div class="card-header">
          <h3 class="card-title">Applications</h3>
          <div class="card-actions">
            <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary me-2">
              <span class="ti ti-plus me-2"></span> Add Application
            </a>
            <button class="btn btn-outline-primary" id="toggle-all-apps">
              <span class="ti ti-chevrons-down me-1"></span> <span id="toggle-text">Expand All</span>
            </button>
          </div>
        </div>
        <div class="card-body">
          {% if server.apps %}
          <div class="accordion" id="accordionApps">
            {% for app in server.apps %}
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading-{{ app.id }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse-{{ app.id }}" aria-expanded="false" aria-controls="collapse-{{ app.id }}">
                  <div class="d-flex justify-content-between align-items-center w-100 me-2">
                    <span>{{ app.name }}</span>
                    {% if app.ports %}
                    <div>
                      {% for port in app.ports %}
                      <span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
                      {% endfor %}
                    </div>
                    {% endif %}
                  </div>
                </button>
              </h2>
              <div id="collapse-{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ app.id }}"
                data-bs-parent="#accordionApps">
                <div class="accordion-body">
                  <div class="d-flex justify-content-end mb-3">
                    <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
                      class="btn btn-sm btn-outline-primary me-2">
                      <span class="ti ti-eye me-1"></span> View
                    </a>
                    <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
                      class="btn btn-sm btn-outline-primary me-2">
                      <span class="ti ti-edit me-1"></span> Edit
                    </a>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteApp('{{ app.id }}', '{{ app.name }}')">
                      <span class="ti ti-trash me-1"></span> Delete
                    </button>
                  </div>

                  {% if app.documentation %}
                  <div class="markdown-content">
                    {{ app.documentation|markdown|safe }}
                  </div>
                  {% else %}
                  <div class="text-muted">No documentation available</div>
                  {% endif %}
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <span class="ti ti-apps"></span>
            </div>
            <p class="empty-title">No applications found</p>
            <p class="empty-subtitle text-muted">
              This server doesn't have any applications yet.
            </p>
            <div class="empty-action">
              <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
                <span class="ti ti-plus me-1"></span> Add Application
              </a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Delete Server Modal -->
<div class="modal modal-blur fade" id="deleteServerModal" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">Are you sure?</div>
        <div>This will permanently delete the server "{{ server.hostname }}" and all associated applications and ports.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form method="POST" action="{{ url_for('dashboard.server_delete', server_id=server.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Server</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Delete App Modal Template - Will be dynamically populated -->
<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">Are you sure?</div>
        <div id="delete-app-message"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form id="delete-app-form" method="POST" action="">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Application</button>
        </form>
      </div>
    </div>
  </div>
</div>

{% block extra_js %}
<script>
  // Function to handle app deletion modal
  function deleteApp(appId, appName) {
    const modal = document.getElementById('deleteAppModal');
    const message = document.getElementById('delete-app-message');
    const form = document.getElementById('delete-app-form');

    message.textContent = `This will delete the application "${appName}" and all its ports.`;
    form.action = "{{ url_for('dashboard.app_delete', app_id=0) }}".replace('0', appId);

    // Show the modal
    new bootstrap.Modal(modal).show();
  }

  // Toggle expand/collapse all
  document.addEventListener('DOMContentLoaded', function () {
    const toggleBtn = document.getElementById('toggle-all-apps');
    const toggleText = document.getElementById('toggle-text');
    let isExpanded = false;

    toggleBtn.addEventListener('click', function () {
      const accordionButtons = document.querySelectorAll('.accordion-button');
      const accordionContents = document.querySelectorAll('.accordion-collapse');

      isExpanded = !isExpanded;

      if (isExpanded) {
        // Expand all
        accordionButtons.forEach(button => {
          button.classList.remove('collapsed');
          button.setAttribute('aria-expanded', 'true');
        });

        accordionContents.forEach(content => {
          content.classList.add('show');
        });

        toggleText.textContent = 'Collapse All';
        toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-down');
        toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-up');
      } else {
        // Collapse all
        accordionButtons.forEach(button => {
          button.classList.add('collapsed');
          button.setAttribute('aria-expanded', 'false');
        });

        accordionContents.forEach(content => {
          content.classList.remove('show');
        });

        toggleText.textContent = 'Expand All';
        toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-up');
        toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-down');
      }
    });
  });
</script>
{% endblock %}

{% endblock %}

{% block styles %}
<style>
  .port-map {
    overflow-x: auto;
  }

  .port-map-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
  }

  .port-item {
    padding: 4px;
    font-size: 10px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
  }

  .port-item:hover {
    opacity: 0.8;
  }

  .markdown-body {
    padding: 1rem;
    background-color: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
  }
</style>
{% endblock %}