{% 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 class="text-muted mt-1">{{ server.ip_address }}</div>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
            <span class="ti ti-edit"></span> Edit Server
          </a>
          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
            <span class="ti ti-trash"></span> Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-6 col-lg-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">
            <label class="form-label text-muted">IP Address</label>
            <div>{{ server.ip_address }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label text-muted">Subnet</label>
            <div>
              <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}">
                {{ server.subnet.cidr }}
              </a>
              ({{ server.subnet.location }})
            </div>
          </div>
          <div>
            <label class="form-label text-muted">Scan Status</label>
            <div>{{ server.scan_status or 'Not scanned yet' }}</div>
          </div>
        </div>
      </div>

      <!-- Port Usage Card -->
      <div class="card mt-3">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h3 class="card-title">Port Usage</h3>
          <a href="#" class="btn btn-sm btn-outline-primary" id="getFreePorts">Get Free Port</a>
        </div>
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <span class="d-flex align-items-center me-3">
              <span class="status-dot status-green me-2"></span> Free
            </span>
            <span class="d-flex align-items-center">
              <span class="status-dot status-red me-2"></span> Used
            </span>
          </div>

          <div class="mt-3">
            <h4 class="card-subtitle">Used Ports</h4>
            <div class="d-flex flex-wrap mt-2">
              {% set used_ports = [] %}
              {% for app in server.apps %}
              {% for port in app.ports %}
              {% set _ = used_ports.append({'port': port.port_number, 'protocol': port.protocol, 'app': app.name}) %}
              {% endfor %}
              {% endfor %}

              {% if used_ports %}
              {% for port_info in used_ports %}
              <span class="badge bg-red me-1 mb-1 text-dark" title="{{ port_info.app }}">
                {{ port_info.port }}/{{ port_info.protocol }}
              </span>
              {% endfor %}
              {% else %}
              <span class="text-muted">No ports in use</span>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-lg-8">
      <!-- Documentation section -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Documentation</h3>
        </div>
        <div class="card-body">
          {% if server.documentation %}
          <div class="markdown-content">
            {{ server.documentation|markdown|safe }}
          </div>
          {% else %}
          <div class="text-muted">No documentation added yet.</div>
          {% endif %}
        </div>
      </div>

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

                  <!-- Documentation preview -->
                  {% if app.documentation %}
                  <div class="mt-3">
                    <h5>Documentation</h5>
                    <div class="markdown-content card p-3 bg-light">
                      {{ (app.documentation | truncate(200, true, "..."))|markdown|safe }}
                      {% if app.documentation | length > 200 %}
                      <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="mt-2 d-block">Read more...</a>
                      {% endif %}
                    </div>
                  </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 its applications.</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 -->
<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();
  }

  // Initialize expand/collapse functionality
  document.addEventListener('DOMContentLoaded', function () {
    const expandAllBtn = document.getElementById('expandAllBtn');
    if (expandAllBtn) {
      expandAllBtn.addEventListener('click', function () {
        const isExpanded = expandAllBtn.getAttribute('data-expanded') === 'true';
        const accordionItems = document.querySelectorAll('.accordion-collapse');

        accordionItems.forEach(item => {
          if (isExpanded) {
            // Collapse all items
            bootstrap.Collapse.getInstance(item)?.hide();
          } else {
            // Expand all items
            bootstrap.Collapse.getInstance(item) || new bootstrap.Collapse(item, { toggle: false });
            bootstrap.Collapse.getInstance(item).show();
          }
        });

        // Update button state
        expandAllBtn.setAttribute('data-expanded', isExpanded ? 'false' : 'true');
        if (isExpanded) {
          expandAllBtn.innerHTML = '<span class="ti ti-chevrons-down"></span> Expand All';
        } else {
          expandAllBtn.innerHTML = '<span class="ti ti-chevrons-up"></span> Collapse All';
        }
      });
    }

    // Handle free port button
    document.getElementById('getFreePorts')?.addEventListener('click', function (e) {
      e.preventDefault();
      fetch(`/api/servers/{{ server.id }}/suggest_port`)
        .then(response => response.json())
        .then(data => {
          if (data.port) {
            alert(`Available port: ${data.port}`);
          } else {
            alert('No available ports found');
          }
        })
        .catch(error => {
          console.error('Error finding free port:', error);
          alert('Error finding free port');
        });
    });
  });
</script>
{% endblock %}

{% endblock %}

{% block styles %}
<style>
  .port-usage-compact {
    width: 100%;
  }

  .port-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }

  .port-range {
    height: 12px;
    flex-grow: 1;
    min-width: 3px;
    border-radius: 2px;
  }

  .port-range-free {
    background-color: rgba(25, 135, 84, 0.4);
  }

  .port-range-used {
    background-color: rgba(220, 53, 69, 0.6);
  }

  .port-indicator {
    display: inline-block;
    width: 20px;
    height: 10px;
    border-radius: 2px;
  }

  .port-free {
    background-color: rgba(25, 135, 84, 0.4);
  }

  .port-used {
    background-color: rgba(220, 53, 69, 0.6);
  }

  .used-ports-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .used-port-tag {
    background-color: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--bs-body-color);
    padding: 2px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .copy-port {
    cursor: pointer;
    opacity: 0.7;
  }

  .copy-port:hover {
    opacity: 1;
  }

  .markdown-content {
    overflow-wrap: break-word;
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .markdown-content p {
    margin-bottom: 1rem;
  }

  .markdown-content a {
    color: var(--tblr-primary);
  }

  .badge.bg-red.text-dark {
    color: #000 !important;
    font-weight: 500;
  }

  .card-body .markdown-content {
    padding: 0;
  }
</style>
{% endblock %}