{% extends "base.html" %}
{% load i18n risk_extras %}

{% block crumbs %}
  <li><a href="{% url 'risks:list_controls' %}">{% trans "Controls" %}</a></li>
  <li><a href="{% url 'risks:show_control' control.id %}">{{ control.title }}</a></li>
{% endblock %}

{% block content %}

<!-- ERP-style tabs -->
<div class="erp-tabs">
  <a class="is-active" data-tab="overview">{% trans "Overview" %}</a>
  <a data-tab="risks">{% trans "Linked Risks" %}</a>
  <a data-tab="history">{% trans "History" %}</a>
  <!-- Action Icons -->
  <div class="buttons">
    <a href="{% url 'admin:risks_control_change' control.pk %}" class="button is-small is-warning" title="{% trans 'Edit Control' %}">
      <span class="icon"><i class="fas fa-edit"></i></span>
    </a>
    <a href="{% url 'admin:risks_control_delete' control.pk %}" class="button is-small is-danger" title="{% trans 'Delete Control' %}">
      <span class="icon"><i class="fas fa-trash"></i></span>
    </a>
  </div>
</div>

<!-- Tab: Overview -->
<div class="tab-panel" data-tab="overview">
  <div class="card">
    <div class="card-content">
      <div class="columns is-multiline">
        <div class="column is-half">
          <p><strong>{% trans "Control" %}:</strong> {{ control.title }}</p>
          <p><strong>{% trans "Responsible" %}:</strong> {{ control.responsible|default:"–" }}</p>
          <p><strong>{% trans "Status" %}:</strong> {{ control.get_status_display }}</p>
          <p>
            <strong>{% trans "Link" %}:</strong>
            {% if control.wiki_link %}
              <a href="{{ control.wiki_link }}" target="_blank">🔗</a>
            {% else %}
              –
            {% endif %}
          </p>
        </div>
        <div class="column is-half">
          <p><strong>{% trans "Created at" %}:</strong> {{ control.created_at|date:"d.m.Y H:i" }}</p>
          <p><strong>{% trans "Updated at" %}:</strong> {{ control.updated_at|date:"d.m.Y H:i" }}</p>
          <p><strong>{% trans "Deadline" %}:</strong> {{ control.due_date|date:"d.m.Y"|default:"–" }}</p>
        </div>
      </div>
      <section>
        <h3 class="title is-6">{% trans "Description" %}</h3>
        <p>{{ control.description|default:"–" }}</p>
      </section>
    </div>
  </div>
</div><!-- Overview Tab End -->

<!-- Tab: Linked Risks -->
<div class="tab-panel is-hidden" data-tab="risks">
  <div class="table-container">
    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
      <thead>
        <tr class="has-background-prosoft">
          <th class="has-text-centered">{% trans "Risk" %}</th>
          <th class="has-text-centered">{% trans "Owner" %}</th>
          <th class="has-text-centered">{% trans "Category" %}</th>
          <th class="has-text-centered">{% trans "Asset" %}</th>
          <th class="has-text-centered">{% trans "Process" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for risk in control.risks.all %}
        <tr onclick="window.location.href='{% url 'risks:show_risk' risk.id %}'" style="cursor:pointer;">
          <td>{{ risk.title }}</td>
          <td class="has-text-centered">{{ risk.owner|user_display|default:"–" }}</td>
          <td class="has-text-centered">{{ risk.category|default:"–" }}</td>
          <td class="has-text-centered">{{ risk.asset|default:"–" }}</td>
          <td class="has-text-centered">{{ risk.process|default:"–" }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="has-text-grey has-text-centered">{% trans "No linked risks." %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div><!-- Linked Risks Tab End -->

<!-- Tab: History -->
<div class="tab-panel is-hidden" data-tab="history">
  <div class="table-container">
    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
      <thead>
        <tr class="has-background-prosoft">
          <th class="has-text-centered">{% trans "Time" %}</th>
          <th class="has-text-centered">{% trans "User" %}</th>
          <th class="has-text-centered">{% trans "Action" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs %}
        <tr>
          <td class="has-text-centered">{{ log.action_time|date:"d.m.Y H:i" }}</td>
          <td class="has-text-centered">{{ log.user.get_full_name|default:log.user.username }}</td>
          <td>{{ log.get_change_message }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="3" class="has-text-grey has-text-centered">{% trans "No history found." %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div><!-- History Tab End -->

<!-- Tab switching script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const tabs   = document.querySelectorAll('.erp-tabs a[data-tab]');
  const panels = document.querySelectorAll('.tab-panel');
  tabs.forEach(tab => {
    tab.addEventListener('click', e => {
      e.preventDefault();
      tabs.forEach(x => x.classList.remove('is-active'));
      panels.forEach(p => p.classList.add('is-hidden'));
      tab.classList.add('is-active');
      const target = tab.getAttribute('data-tab');
      const activePanel = document.querySelector(`.tab-panel[data-tab="${target}"]`);
      if (activePanel) activePanel.classList.remove('is-hidden');
    });
  });
});
</script>
{% endblock %}