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

  <div class="row mt-3">
    <div class="col-md-4">
      <!-- Basic 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">Server</div>
            <div>
              <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}">
                {{ server.hostname }}
              </a>
              ({{ server.ip_address }})
            </div>
          </div>
          <div class="mb-3">
            <div class="form-label">Created</div>
            <div>{{ app.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
          </div>
          <div class="mb-3">
            <div class="form-label">Last Updated</div>
            <div>{{ app.updated_at.strftime('%Y-%m-%d %H:%M') }}</div>
          </div>
        </div>
      </div>

      <!-- Ports -->
      <div class="card mt-3">
        <div class="card-header">
          <h3 class="card-title">Ports</h3>
          <div class="card-actions">
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
              <span class="ti ti-plus me-1"></span> Add Port
            </button>
          </div>
        </div>
        <div class="card-body">
          {% if app.ports %}
          <div class="table-responsive">
            <table class="table table-vcenter">
              <thead>
                <tr>
                  <th>Port</th>
                  <th>Protocol</th>
                  <th>Description</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                {% for port in app.ports %}
                <tr>
                  <td>{{ port.port_number }}</td>
                  <td>{{ port.protocol }}</td>
                  <td>{{ port.description or 'No description' }}</td>
                  <td>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#deletePortModal{{ port.id }}"
                      class="btn btn-sm btn-ghost-danger">
                      <span class="ti ti-trash"></span>
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <span class="ti ti-plug"></span>
            </div>
            <p class="empty-title">No ports configured</p>
            <p class="empty-subtitle text-muted">
              Add port information to track which ports this application uses.
            </p>
            <div class="empty-action">
              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
                <span class="ti ti-plus me-2"></span> Add Port
              </button>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <!-- Documentation section - ENHANCED -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Documentation</h3>
        </div>
        <div class="card-body markdown-content">
          {% if app.documentation %}
          {{ app.documentation|markdown }}
          {% 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 application to keep track of important information.
            </p>
            <div class="empty-action">
              <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
                <span class="ti ti-edit me-2"></span> Add Documentation
              </a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Port Modal -->
<div class="modal" id="addPortModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('api.add_app_port', app_id=app.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h5 class="modal-title">Add Port</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label required">Port Number</label>
            <input type="number" class="form-control" name="port_number" required min="1" max="65535">
          </div>
          <div class="mb-3">
            <label class="form-label required">Protocol</label>
            <select class="form-select" name="protocol" required>
              <option value="TCP">TCP</option>
              <option value="UDP">UDP</option>
              <option value="SCTP">SCTP</option>
              <option value="OTHER">OTHER</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <input type="text" class="form-control" name="description" placeholder="What is this port used for?">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Add Port</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete App Modal -->
<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>This will permanently delete the application "{{ app.name }}" and all its 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.app_delete', app_id=app.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Application</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Delete Port Modals -->
{% for port in app.ports %}
<div class="modal modal-blur fade" id="deletePortModal{{ port.id }}" 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 delete port {{ port.port_number }}/{{ port.protocol }}.</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('api.delete_port', port_id=port.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Port</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}