{% extends "onboarding/base.html" %}

{% block title %}Network Configuration{% endblock %}

{% block content %}
<div class="card shadow-sm">
  <div class="card-body">
    <h2 class="card-title mb-4">Network Configuration</h2>

    <p class="text-muted mb-4">
      Configure P2P networking settings for your PRSM node.
    </p>

    <form method="POST" action="/onboarding/network">
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="p2p_port" class="form-label">
            <strong>P2P Port</strong>
          </label>
          <input type="number"
                 class="form-control"
                 id="p2p_port"
                 name="p2p_port"
                 value="{{ p2p_port }}"
                 min="1"
                 max="65535">
          <div class="form-text">
            Port for peer-to-peer communication
          </div>
        </div>

        <div class="col-md-6 mb-3">
          <label for="api_port" class="form-label">
            <strong>API Port</strong>
          </label>
          <input type="number"
                 class="form-control"
                 id="api_port"
                 name="api_port"
                 value="{{ api_port }}"
                 min="1"
                 max="65535">
          <div class="form-text">
            Port for the REST API
          </div>
        </div>
      </div>

      <div class="mb-4">
        <label for="bootstrap_nodes" class="form-label">
          <strong>Bootstrap Nodes</strong>
        </label>
        <input type="text"
               class="form-control"
               id="bootstrap_nodes"
               name="bootstrap_nodes"
               value="{{ bootstrap_nodes }}"
               placeholder="wss://bootstrap1.prsm-network.com:8765">
        <div class="form-text">
          Comma-separated list of bootstrap node addresses (WebSocket URLs)
        </div>
      </div>

      <div class="mb-4">
        <h5 class="mb-3">IPFS Status</h5>
        <div class="card">
          <div class="card-body">
            {% if ipfs_status.status == "running" %}
              <div class="d-flex align-items-center">
                <span class="badge bg-success me-2">Running</span>
                <span class="text-muted">{{ ipfs_status.message }}</span>
              </div>
            {% elif ipfs_status.status == "installed_not_running" %}
              <div class="d-flex align-items-center">
                <span class="badge bg-warning text-dark me-2">Not Running</span>
                <span class="text-muted">{{ ipfs_status.message }}</span>
              </div>
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" id="ipfs_auto_start" name="ipfs_auto_start" value="true" checked>
                <label class="form-check-label" for="ipfs_auto_start">
                  Auto-start IPFS daemon when node starts
                </label>
              </div>
            {% else %}
              <div class="d-flex align-items-center">
                <span class="badge bg-secondary me-2">Not Installed</span>
                <span class="text-muted">{{ ipfs_status.message }}</span>
              </div>
              <small class="text-muted d-block mt-2">
                Install IPFS for distributed storage features:
                <a href="https://docs.ipfs.tech/install/command-line/" target="_blank">IPFS Installation Guide</a>
              </small>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-between mt-4">
        <a href="/onboarding/backend" class="btn btn-outline-secondary">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left me-1" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
          </svg>
          Back
        </a>
        <button type="submit" class="btn btn-primary">
          Continue
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right ms-1" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
          </svg>
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}