{% extends "base.html" %}
{% block title %}{{ board.name }} – eWeLink Settings{% endblock %}

{% block content %}
<div class="container py-4" style="max-width:560px">
  <a href="{{ url_for('sonoff.gateway', board_id=board.id) }}" class="btn btn-outline-secondary btn-sm mb-3">
    <i class="bi bi-arrow-left me-1"></i>Back to Gateway
  </a>

  <div class="card bg-dark border-secondary">
    <div class="card-header">
      <h5 class="mb-0"><i class="bi bi-key-fill me-2 text-warning"></i>eWeLink Account Settings</h5>
    </div>
    <div class="card-body">

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          {% for cat, msg in messages %}
            <div class="alert alert-{{ cat }} py-2 alert-dismissible fade show" role="alert">
              {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          {% endfor %}
        {% endif %}
      {% endwith %}

      <p class="text-muted small mb-4">
        Enter your eWeLink account credentials. These are stored on the server and used
        to authenticate with the eWeLink cloud API.
        <strong>Tip:</strong> create a secondary eWeLink account and share your devices
        with it to avoid being logged out of the mobile app.
      </p>

      <form method="post">
        <div class="mb-3">
          <label class="form-label">Email or Phone Number</label>
          <input type="text" name="username" class="form-control"
                 value="{{ board.config.get('ewelink_username', '') }}"
                 placeholder="you@example.com" required>
          <div class="form-text text-muted">Use email or full phone number (e.g. +1234567890)</div>
        </div>

        <div class="mb-3">
          <label class="form-label">Password</label>
          <div class="input-group">
            <input type="password" name="password" id="pwdInput" class="form-control"
                   placeholder="eWeLink password" required>
            <button type="button" class="btn btn-outline-secondary" id="pwdToggle">
              <i class="bi bi-eye" id="pwdIcon"></i>
            </button>
          </div>
        </div>

        <div class="mb-4">
          <label class="form-label">Country / Region</label>
          <select name="country_code" class="form-select">
            {% for code, label in countries %}
            <option value="{{ code }}" {% if code == current_country %}selected{% endif %}>
              {{ label }}
            </option>
            {% endfor %}
          </select>
          <div class="form-text text-muted">
            Determines which eWeLink server region to use (EU, US, AS, CN)
          </div>
        </div>

        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-1"></i>Save & Connect
          </button>
          <a href="{{ url_for('sonoff.gateway', board_id=board.id) }}" class="btn btn-outline-secondary">
            Cancel
          </a>
        </div>
      </form>

      {% if board.config.get('ewelink_at') %}
      <hr class="border-secondary mt-4">
      <p class="small text-success mb-0">
        <i class="bi bi-check-circle me-1"></i>
        Currently connected to eWeLink
        (region: <strong>{{ board.config.get('ewelink_region', '?') }}</strong>)
      </p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('pwdToggle').addEventListener('click', function() {
  const inp = document.getElementById('pwdInput');
  const icon = document.getElementById('pwdIcon');
  if (inp.type === 'password') {
    inp.type = 'text';
    icon.className = 'bi bi-eye-slash';
  } else {
    inp.type = 'password';
    icon.className = 'bi bi-eye';
  }
});
</script>
{% endblock %}