{% extends "base.html" %}
{% block title %}{{ device.name }} - Device - MikroMon{% endblock %}
{% block content %}
<div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h1 class="h3 mb-0">{{ device.name }}</h1>
    <div class="text-muted">{{ device.host }}</div>
  </div>
  <div class="d-flex gap-2">
    <a class="btn btn-outline-secondary" href="{{ url_for('devices.index') }}"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
    <a class="btn btn-outline-primary" href="{{ url_for('devices.edit', device_id=device.id) }}"><i class="fa-solid fa-pen-to-square me-1"></i>Edit</a>
    <form method="post" action="{{ url_for('devices.delete', device_id=device.id) }}" onsubmit="return confirm('Delete this device?');">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button class="btn btn-outline-danger" type="submit"><i class="fa-solid fa-trash me-1"></i>Delete</button>
    </form>
    <button class="btn btn-primary" id="btnTest"><i class="fa-solid fa-plug-circle-check me-1"></i>Test REST</button>
    <button class="btn btn-outline-primary" id="btnDiscover"><i class="fa-solid fa-magnifying-glass me-1"></i>Discover</button>
  </div>
</div>

<div class="row g-3">
  <div class="col-12 col-lg-5">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="fw-semibold mb-2"><i class="fa-solid fa-server me-2"></i>Configuration</div>
        <dl class="row mb-0 small">
          <dt class="col-5 text-muted">REST</dt><dd class="col-7">{{ device.host }}:{{ device.rest_port }}{{ device.rest_base_path }}</dd>
          <dt class="col-5 text-muted">TLS</dt><dd class="col-7">{{ 'insecure' if device.allow_insecure_tls else 'strict' }}</dd>
          <dt class="col-5 text-muted">SSH</dt><dd class="col-7">{{ 'enabled' if device.ssh_enabled else 'disabled' }}{% if device.ssh_enabled %} ({{ device.ssh_port }}){% endif %}</dd>
          <dt class="col-5 text-muted">Last error</dt><dd class="col-7">{{ device.last_error or '-' }}</dd>
          <dt class="col-5 text-muted">Created</dt><dd class="col-7">{{ device.created_at }}</dd>
        </dl>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-7">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="fw-semibold mb-2"><i class="fa-solid fa-terminal me-2"></i>Result</div>
        <pre class="bg-light border rounded p-3 mb-0" style="min-height: 240px" id="out">{}</pre>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function(){
  const out = document.getElementById('out');
  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
  function show(obj){ out.textContent = JSON.stringify(obj, null, 2); }
  async function postJson(url){
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type':'application/json', 'X-CSRFToken': csrf },
      body: JSON.stringify({})
    });
    let data = null;
    try { data = await res.json(); } catch(e) { data = { ok:false, error:'Invalid JSON response' }; }
    if(!res.ok) return { ok:false, ...data };
    return data;
  }
  document.getElementById('btnTest')?.addEventListener('click', async ()=>{
    show({loading:true});
    const data = await postJson("{{ url_for('devices.test', device_id=device.id) }}");
    show(data);
  });
  document.getElementById('btnDiscover')?.addEventListener('click', async ()=>{
    show({loading:true});
    const res = await fetch("{{ url_for('devices.discover', device_id=device.id) }}");
    const data = await res.json();
    show(data);
  });
})();
</script>
{% endblock %}