{% extends "base.html" %}
{% block title %}{{ t.accounts_title }}{% endblock %}
{% block page_title %}{{ t.accounts_title }}{% endblock %}
{% block page_desc %}{{ t.accounts_desc }}{% endblock %}
{% block content %}
<div class="toolbar">
  <span class="stat-lbl">{{ accounts|length }} 个账号</span>
  <button class="btn primary" onclick="openAdd()">+ {{ t.add_account }}</button>
</div>
<div class="card">
  <div id="accList">
    {% if accounts %}
    <table>
      <tbody>
        {% for a in accounts %}
        <tr>
          <td style="width:40px"><div class="acc-ic">●</div></td>
          <td>
            <div><strong>{{ a.name }}</strong> {% if a.is_default %}<span class="badge warn">默认</span>{% endif %}</div>
            <div class="stat-lbl code">Key: {{ a.masked_key() }}</div>
            {% if a.note %}<div class="stat-lbl">{{ a.note }}</div>{% endif %}
          </td>
          <td style="text-align:right;white-space:nowrap">
            {% if not a.is_default %}<button class="btn sm" onclick="setDefault('{{ a.id }}')">★ {{ t.set_default }}</button>{% endif %}
            <button class="btn sm" onclick="editAcc('{{ a.id }}','{{ a.name|e }}','{{ a.api_key|e }}','{{ a.base_url|e }}','{{ a.note|e }}')">✎ {{ t.edit }}</button>
            <button class="btn sm danger" onclick="delAcc('{{ a.id }}')">✕ {{ t.delete }}</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty">{{ t.no_accounts }}</div>
    {% endif %}
  </div>
</div>
<div class="card" style="margin-top:16px">
  <div class="card-h"><h3>{{ t.how_to_get_credentials }}</h3></div>
  <div class="card-b">
    <ol style="color:var(--muted);line-height:1.8;padding-left:20px">
      <li>{{ t.step1 }}</li>
      <li>{{ t.step2 }}</li>
      <li>{{ t.step3 }}</li>
      <li>{{ t.step4 }}</li>
    </ol>
  </div>
</div>

<div class="modal-bg" id="addModal" style="display:none">
  <div class="modal">
    <div class="modal-h"><h3 id="modalTitle">{{ t.add_account }}</h3><button class="btn sm" onclick="this.closest('.modal-bg').style.display='none'">✕</button></div>
    <div class="modal-b">
      <input type="hidden" id="editId">
      <div class="field"><label>{{ t.account_name }}</label><input class="input" id="aName" placeholder="例如：生产账号"></div>
      <div class="field"><label>{{ t.api_key }}</label><input class="input code" id="aKey" placeholder="cfsd_xxxxxxxxxx"></div>
      <div class="field"><label>{{ t.api_secret }}</label><input class="input code" id="aSecret" type="password" placeholder="yyyyyyyyyyyy"></div>
      <div class="field"><label>{{ t.base_url_advanced }}</label><input class="input code" id="aBase" value="https://api005.dnshe.com/index.php?m=domain_hub"></div>
      <div class="field"><label>{{ t.account_note }}</label><input class="input" id="aNote" placeholder="{{ t.note_placeholder }}"></div>
    </div>
    <div class="modal-f"><button class="btn" onclick="this.closest('.modal-bg').style.display='none'">{{ t.cancel }}</button><button class="btn primary" onclick="saveAcc()">{{ t.save }}</button></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function openAdd(){document.getElementById('modalTitle').textContent='添加 DNSHE 账号';document.getElementById('editId').value='';document.getElementById('aName').value='';document.getElementById('aKey').value='';document.getElementById('aSecret').value='';document.getElementById('aBase').value='https://api005.dnshe.com/index.php?m=domain_hub';document.getElementById('aNote').value='';document.getElementById('addModal').style.display='flex';}
function editAcc(id,name,key,base,note){document.getElementById('modalTitle').textContent='编辑账号';document.getElementById('editId').value=id;document.getElementById('aName').value=name;document.getElementById('aKey').value=key;document.getElementById('aSecret').value='';document.getElementById('aBase').value=base;document.getElementById('aNote').value=note;document.getElementById('addModal').style.display='flex';}
function saveAcc(){
  var name=document.getElementById('aName').value.trim();var key=document.getElementById('aKey').value.trim();var secret=document.getElementById('aSecret').value.trim();
  if(!name||!key)return toast('请填写名称与 API Key','err');
  var id=document.getElementById('editId').value;
  var body={name:name,api_key:key,base_url:document.getElementById('aBase').value.trim(),note:document.getElementById('aNote').value.trim()};
  var url=id?'/api/accounts/'+id:'/api/accounts';var method=id?'PUT':'POST';
  if(!id&&secret)body.api_secret=secret;else if(id&&secret)body.api_secret=secret;
  fetch(url,{method:method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}).then(function(r){return r.json()}).then(function(r){
    if(r.success){toast(id?'已更新':'已添加','ok');document.getElementById('addModal').style.display='none';location.reload();}
    else toast(r.message||'操作失败','err');
  });
}
function setDefault(id){fetch('/api/accounts/default',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:id})}).then(function(r){return r.json()}).then(function(r){r.success?(toast('已设为默认','ok'),location.reload()):toast('失败','err');});}
function delAcc(id){if(!confirm('确认删除该账号？'))return;fetch('/api/accounts/'+id,{method:'DELETE'}).then(function(r){return r.json()}).then(function(r){r.success?(toast('已删除','ok'),location.reload()):toast('失败','err');});}
</script>
{% endblock %}