{% 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">
          Edit Application: {{ app.name }}
        </h2>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-body">
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      {% endfor %}
      {% endif %}
      {% endwith %}

      <form method="POST" action="{{ url_for('dashboard.app_edit', app_id=app.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
          <label class="form-label required">Application Name</label>
          <input type="text" class="form-control" name="name" value="{{ app.name }}" required>
        </div>
        <div class="mb-3">
          <label class="form-label required">Server</label>
          <select class="form-select" name="server_id" required>
            <option value="">Select a server</option>
            {% for server in servers %}
            <option value="{{ server.id }}" {% if server.id==app.server_id %}selected{% endif %}>
              {{ server.hostname }} ({{ server.ip_address }})
            </option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <textarea class="form-control" name="documentation" rows="12"
            placeholder="Use Markdown for formatting">{{ app.documentation }}</textarea>
          <small class="form-hint">Supports Markdown formatting including GitHub-style alerts:</small>
          <div class="mt-2 d-flex gap-2 flex-wrap">
            <code>> [!NOTE] This is a note</code>
            <code>> [!TIP] This is a tip</code>
            <code>> [!IMPORTANT] Important info</code>
            <code>> [!WARNING] Warning message</code>
            <code>> [!CAUTION] Critical caution</code>
          </div>
        </div>

        <!-- Port management section -->
        <div class="mb-3">
          <label class="form-label">Ports</label>
          <div class="table-responsive">
            <table class="table table-vcenter" id="ports-table">
              <thead>
                <tr>
                  <th>Port Number</th>
                  <th>Protocol</th>
                  <th>Description</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {% for port in app.ports %}
                <tr>
                  <td>
                    <input type="number" name="port_id_{{ port.id }}" value="{{ port.port_number }}"
                      class="form-control" min="1" max="65535">
                  </td>
                  <td>
                    <select name="protocol_{{ port.id }}" class="form-select">
                      <option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
                      <option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
                      <option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
                      <option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</option>
                    </select>
                  </td>
                  <td>
                    <input type="text" name="description_{{ port.id }}" value="{{ port.description }}"
                      class="form-control" placeholder="Description">
                  </td>
                  <td>
                    <button type="button" class="btn btn-sm btn-ghost-danger"
                      onclick="removePermanentPort(this, {{ port.id }})">
                      <span class="ti ti-trash"></span>
                    </button>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          <input type="hidden" name="ports_to_delete" id="ports-to-delete" value="">

          <div class="mt-3">
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addPortRow()">
              <span class="ti ti-plus me-1"></span> Add Port
            </button>
          </div>
        </div>

        <div class="form-footer">
          <div class="d-flex">
            <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-link">Cancel</a>
            <button type="submit" class="btn btn-primary ms-auto">Save Changes</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

{% block extra_js %}
<script>
  let newPortIndex = 0;
  const portsToDelete = [];

  function addPortRow() {
    const tbody = document.querySelector('#ports-table tbody');
    const tr = document.createElement('tr');
    tr.classList.add('new-port-row');
    tr.innerHTML = `
      <td>
        <input type="number" name="new_port_${newPortIndex}" class="form-control" 
               min="1" max="65535" placeholder="Port number">
      </td>
      <td>
        <select name="new_protocol_${newPortIndex}" class="form-select">
          <option value="TCP">TCP</option>
          <option value="UDP">UDP</option>
          <option value="SCTP">SCTP</option>
          <option value="OTHER">OTHER</option>
        </select>
      </td>
      <td>
        <input type="text" name="new_description_${newPortIndex}" class="form-control" 
               placeholder="Description">
      </td>
      <td>
        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
          <span class="ti ti-trash"></span>
        </button>
      </td>
    `;
    tbody.appendChild(tr);
    newPortIndex++;
  }

  function removePortRow(button) {
    const row = button.closest('tr');
    row.remove();
  }

  function removePermanentPort(button, portId) {
    const row = button.closest('tr');
    row.remove();
    portsToDelete.push(portId);
    document.getElementById('ports-to-delete').value = portsToDelete.join(',');
  }
</script>
{% endblock %}

{% endblock %}