{% extends 'generic/object.html' %}
{% load helpers %}
{% load render_table from django_tables2 %}

{% block content %}
  <div class="row">
    <div class="col col-md-6">
      <div class="card">
        <h2 class="card-header">Managed PDU</h2>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">NetBox Device</th>
            <td>{{ object.device|linkify }}</td>
          </tr>
          <tr>
            <th scope="row">Name</th>
            <td>{{ object.device.name }}</td>
          </tr>
          <tr>
            <th scope="row">API URL</th>
            <td><code>{{ object.api_url }}</code></td>
          </tr>
          <tr>
            <th scope="row">API Username</th>
            <td>{{ object.api_username }}</td>
          </tr>
          <tr>
            <th scope="row">Verify SSL</th>
            <td>{% checkmark object.verify_ssl %}</td>
          </tr>
          <tr>
            <th scope="row">Vendor</th>
            <td>{{ object.get_vendor_display }}</td>
          </tr>
          <tr>
            <th scope="row">Outlet Count</th>
            <td>{{ outlet_count }}</td>
          </tr>
          <tr>
            <th scope="row">Inlet Count</th>
            <td>{{ inlet_count }}</td>
          </tr>
        </table>
      </div>
      {% with ifaces=object.network_interfaces.all %}
      {% if ifaces %}
      <div class="card">
        <h2 class="card-header">Network</h2>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Default Gateway</th>
            <td>{{ object.default_gateway|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">DNS Servers</th>
            <td>{{ object.dns_servers|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">NTP Servers</th>
            <td>{{ object.ntp_servers|placeholder }}</td>
          </tr>
        </table>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Interface</th>
              <th>MAC Address</th>
              <th>IP Address</th>
              <th>Config</th>
              <th>Link Speed</th>
            </tr>
          </thead>
          <tbody>
            {% for iface in ifaces %}
            <tr>
              <td>{{ iface.interface_name }}</td>
              <td><code>{{ iface.mac_address|placeholder }}</code></td>
              <td>{{ iface.ip_address|placeholder }}</td>
              <td>{{ iface.config_method|placeholder }}</td>
              <td>{{ iface.link_speed|placeholder }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
      {% endwith %}
      {% include 'inc/panels/custom_fields.html' %}
    </div>
    <div class="col col-md-6">
      <div class="card">
        <h2 class="card-header">Sync Status</h2>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Status</th>
            <td>{% badge object.get_sync_status_display bg_color=object.get_sync_status_color %}</td>
          </tr>
          <tr>
            <th scope="row">Last Synced</th>
            <td>{{ object.last_synced|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Metrics Status</th>
            <td>{% badge object.get_metrics_status_display bg_color=object.get_metrics_status_color %}</td>
          </tr>
          <tr>
            <th scope="row">Last Metrics Fetched</th>
            <td>{{ object.last_metrics_fetched|placeholder }}</td>
          </tr>
        </table>
        {% if perms.netbox_pdu_plugin.change_managedpdu %}
          <div class="card-footer d-flex gap-2">
            <form method="post" action="{% url 'plugins:netbox_pdu_plugin:managedpdu_sync' pk=object.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-primary btn-sm">
                <i class="mdi mdi-refresh"></i> Sync PDU
              </button>
            </form>
            <form method="post" action="{% url 'plugins:netbox_pdu_plugin:managedpdu_get_metrics' pk=object.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-outline-primary btn-sm">
                <i class="mdi mdi-chart-line"></i> Get Metrics
              </button>
            </form>
          </div>
        {% endif %}
      </div>
      {% if object.pdu_model or object.serial_number or object.firmware_version or object.rated_voltage or object.rated_current or object.phase_type %}
      <div class="card">
        <h2 class="card-header">Hardware Info</h2>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Model</th>
            <td>{{ object.pdu_model|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Serial Number</th>
            <td>{{ object.serial_number|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Firmware</th>
            <td>{{ object.firmware_version|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">HW Revision</th>
            <td>{{ object.hw_revision|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">MAC Address</th>
            <td><code>{{ object.pdu_mac_address|placeholder }}</code></td>
          </tr>
          <tr>
            <th scope="row">Rated Voltage</th>
            <td>{{ object.rated_voltage|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Rated Current</th>
            <td>{{ object.rated_current|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Rated Frequency</th>
            <td>{{ object.rated_frequency|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Rated Power</th>
            <td>{{ object.rated_power|placeholder }}</td>
          </tr>
          <tr>
            <th scope="row">Phase Type</th>
            <td>
              {% if object.phase_type == "three" %}
                3 Phase
              {% elif object.phase_type == "single" %}
                Single Phase
              {% else %}
                {{ ""|placeholder }}
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Device Time</th>
            <td>{{ object.device_time|placeholder }}</td>
          </tr>
        </table>
      </div>
      {% endif %}
      {% include 'inc/panels/tags.html' %}
      {% include 'inc/panels/comments.html' %}
    </div>
  </div>
  <div class="row">
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">Inlets</h5>
        <div class="table-responsive">
          {% render_table inlets_table %}
        </div>
      </div>
    </div>
  </div>
  {% if ocps %}
  <div class="row">
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">Over-Current Protectors</h5>
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>OCP</th>
                <th>Rating (A)</th>
                <th>Current (A)</th>
                <th>L1 (A)</th>
                <th>L2 (A)</th>
                <th>L3 (A)</th>
                <th>Status</th>
                <th>Last Updated</th>
              </tr>
            </thead>
            <tbody>
              {% for ocp in ocps %}
              <tr>
                <td>{{ ocp.ocp_id }}</td>
                <td>{% if ocp.rating_current_a is not None %}{{ ocp.rating_current_a|floatformat:1 }} A{% else %}—{% endif %}</td>
                <td>{% if ocp.current_a is not None %}{{ ocp.current_a|floatformat:2 }} A{% else %}—{% endif %}</td>
                <td>{% if ocp.poleline_l1_current_a is not None %}{{ ocp.poleline_l1_current_a|floatformat:2 }}{% else %}—{% endif %}</td>
                <td>{% if ocp.poleline_l2_current_a is not None %}{{ ocp.poleline_l2_current_a|floatformat:2 }}{% else %}—{% endif %}</td>
                <td>{% if ocp.poleline_l3_current_a is not None %}{{ ocp.poleline_l3_current_a|floatformat:2 }}{% else %}—{% endif %}</td>
                <td>
                  {% if ocp.tripped is None %}
                    <span class="badge bg-secondary text-white">Unknown</span>
                  {% elif ocp.tripped %}
                    <span class="badge bg-danger">Tripped</span>
                  {% else %}
                    <span class="badge bg-success text-white">Normal</span>
                  {% endif %}
                </td>
                <td>{{ ocp.last_updated_from_pdu|placeholder }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  <div class="row">
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">Outlets</h5>
        <div class="table-responsive">
          {% render_table outlets_table %}
        </div>
        {% if perms.netbox_pdu_plugin.change_managedpdu %}
        <div class="card-footer d-flex align-items-center gap-2">
          <span class="text-muted small me-2" id="outlet-selected-count">0 selected</span>
          <form id="bulk-power-form" method="post"
                action="{% url 'plugins:netbox_pdu_plugin:pduoutlet_bulk_power' pk=object.pk %}">
            {% csrf_token %}
            <div id="bulk-pk-inputs"></div>
            <button type="submit" name="action" value="on"  class="btn btn-success btn-sm">Power ON</button>
            <button type="submit" name="action" value="off" class="btn btn-danger btn-sm">Power OFF</button>
          </form>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  <script>
  (function () {
    function getChecked() {
      return [...document.querySelectorAll('input[name="pk"]:checked')].map(cb => cb.value);
    }
    function updateCount() {
      var n = getChecked().length;
      var el = document.getElementById('outlet-selected-count');
      if (el) el.textContent = n === 0 ? '0 selected' : n + ' selected';
    }
    document.addEventListener('change', function (e) {
      if (e.target && e.target.name === 'pk') updateCount();
    });
    var bulkForm = document.getElementById('bulk-power-form');
    if (bulkForm) {
      bulkForm.addEventListener('submit', function (e) {
        var pks = getChecked();
        if (pks.length === 0) {
          e.preventDefault();
          alert('Select at least one outlet.');
          return;
        }
        var container = document.getElementById('bulk-pk-inputs');
        while (container.firstChild) {
          container.removeChild(container.firstChild);
        }
        pks.forEach(function (pk) {
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'pk';
          input.value = pk;
          container.appendChild(input);
        });
      });
    }
  })();
  </script>
{% endblock content %}