{% extends "base.html" %}
{% block title %}DDNS 설정{% endblock %}

{% block content %}
<div style="padding:20px; box-sizing:border-box;">

  <h3 style="margin-bottom:14px;">🌐 DDNS 설정</h3>

  <!-- IP 정보 -->
  <div style="
      width:100%;
      box-sizing:border-box;
      margin-bottom:18px;
      padding:12px 16px;
      background:#0f172a;
      border-radius:8px;
      font-size:13px;
      color:#cbd5e1;
      display:flex;
      gap:24px;
      flex-wrap:wrap;
  ">
    <div>🌍 공인 IP: <span id="public-ip">조회중…</span></div>
    <div>🏠 내부 IP: <span id="local-ip">조회중…</span></div>
  </div>

  <!-- DDNS 설정 폼 -->
  <form method="POST" action="{{ url_for('ddns_manage') }}"
        style="
          width:100%;
          box-sizing:border-box;
          background:#020617;
          padding:18px;
          border-radius:10px;
        ">

    <div style="margin-bottom:12px;">
      <label style="font-size:13px; color:#94a3b8;">
        DDNS 도메인 (예: nas.example.com)
      </label>
      <input
        type="text"
        name="domain"
        value="{{ config.domain if config and config.domain }}"
        placeholder="nas.example.com"
        required
        style="
          width:100%;
          box-sizing:border-box;
          margin-top:6px;
          padding:10px 12px;
          border-radius:6px;
          border:1px solid #1e293b;
          background:#020617;
          color:#e5e7eb;
          font-size:14px;
        ">
    </div>

    <div style="margin-top:16px;">
      <button type="submit"
        style="
          padding:10px 20px;
          border-radius:6px;
          border:none;
          background:#2563eb;
          color:white;
          font-size:14px;
          cursor:pointer;
        ">
        DNS 저장 & 갱신
      </button>
    </div>

    <p style="margin-top:12px; font-size:12px; color:#64748b;">
      ※ 저장 시 DDNS 갱신 스크립트 실행 + Nginx 설정 자동 반영
    </p>

  </form>

</div>

<script>
fetch("/api/ddns/status", { credentials: "same-origin" })
  .then(r => r.json())
  .then(data => {
    document.getElementById("public-ip").innerText =
      data.public_ip || "unknown";
    document.getElementById("local-ip").innerText =
      data.internal_ip || "unknown";
  })
  .catch(() => {
    document.getElementById("public-ip").innerText = "error";
    document.getElementById("local-ip").innerText  = "error";
  });
</script>
{% endblock %}