{% extends 'generic/object.html' %}
{% load static %}
{% load i18n %}

{# Execution plan tab (PLAN-execution-steps.md Sec. 6). The server only hands over #}
{# the bootstrap JSON below; js/execution_plan.js renders the cards, simulates     #}
{# through the simulate-steps API and persists through save-steps.                  #}

{% block head %}
  {{ block.super }}
  {# The power bar and bank chips reuse the editor's own classes and colours. #}
  <link rel="stylesheet" href="{% static 'netbox_rack_design/css/rack_design.css' %}?v={{ asset_version }}">
  <link rel="stylesheet" href="{% static 'netbox_rack_design/css/editor.css' %}?v={{ asset_version }}">
  <style>
    .rd-plan-tray, .rd-plan-step { margin-bottom: 1rem; }
    /* Gaps between steps: a thin drop target; the line shows only while dragging. */
    .rd-plan-gap { height: 1rem; margin-top: -1rem; position: relative; z-index: 1; }
    .rd-plan-gap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
                          margin-top: -1.5px; border-radius: 2px; background: transparent; }
    .rd-plan-dragging-action .rd-plan-gap::after, .rd-plan-dragging-step .rd-plan-gap::after {
      background: var(--tblr-border-color, #e0e0e0); }
    .rd-plan-gap.rd-plan-over::after { background: var(--tblr-primary, #206bc4); height: 5px; margin-top: -2.5px; }
    .rd-plan-handle { cursor: grab; display: inline-flex; align-items: center; padding: 0 .1rem;
                      color: var(--tblr-secondary, #6c757d); border-radius: 3px; }
    .rd-plan-handle:hover, .rd-plan-handle:focus-visible { color: var(--tblr-primary, #206bc4); }
    .rd-plan-handle:focus-visible { outline: 2px solid var(--tblr-primary, #206bc4); }
    .rd-plan-step.rd-plan-dragging { opacity: .5; }
    .rd-plan-drop { min-height: 2.4rem; }
    .rd-plan-drop.rd-plan-over { outline: 2px dashed var(--tblr-primary, #206bc4); outline-offset: -3px; }
    .rd-plan-action { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem;
                      border-bottom: 1px solid var(--tblr-border-color, #e0e0e0); cursor: grab; }
    .rd-plan-action:last-child { border-bottom: 0; }
    .rd-plan-action.rd-plan-dragging { opacity: .4; }
    .rd-plan-kind { width: 1.4rem; text-align: center; font-weight: 700; }
    .rd-plan-kind-add { color: var(--tblr-green, #2fb344); }
    .rd-plan-kind-remove { color: var(--tblr-red, #d63939); }
    .rd-plan-kind-move { color: var(--tblr-blue, #4299e1); }
    .rd-plan-where { color: var(--tblr-secondary, #6c757d); font-size: .85rem; }
    .rd-plan-body { display: block; }
    .rd-plan-racks { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
                     padding: .6rem; border-top: 1px solid var(--tblr-border-color, #e0e0e0); min-width: 0; }
    .rd-plan-rack { min-width: 0; }
    .rd-plan-rack .nbx-rd-dist-legend, .rd-plan-rack .nbx-rd-dist-label { font-size: .82rem; }
    .rd-plan-rack .nbx-rd-dist-legend { flex-wrap: nowrap; }
    .rd-plan-rack .nbx-rd-dist-leg { flex: 1 1 0; }
    @media (min-width: 992px) {
      .rd-plan-body { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); align-items: start; }
      .rd-plan-body > .rd-plan-racks { border-top: 0; border-left: 1px solid var(--tblr-border-color, #e0e0e0); }
    }
    .rd-plan-rack { position: relative; }
    .rd-plan-rack-name { font-weight: 600; font-size: .95rem; }
    .rd-plan-rack.rd-plan-outdated { opacity: .45; filter: grayscale(1); }
    .rd-plan-badges { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: .2rem; }
    .rd-plan-problem { display: flex; align-items: baseline; gap: .4rem; }
    .rd-plan-problem .badge { flex: none; }
    .rd-plan-detail { font-size: .82rem; line-height: 1.3; overflow-wrap: anywhere;
                      color: var(--tblr-body-color, #1a1a1a); }
    .rd-plan-title { max-width: 22rem; }
    .rd-plan-power-bar { margin-bottom: .15rem; }
    .rd-plan-power-label { font-size: .82rem; font-variant-numeric: tabular-nums;
                           color: var(--tblr-body-color, #1a1a1a); margin-bottom: .35rem; }
    .rd-plan-spin { display: inline-block; }
  </style>
{% endblock head %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">
        {% trans "Execution plan" %}
        <span class="rd-plan-spin d-none ms-2" data-rd-plan-spinner>
          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
          <span class="text-muted small">{% trans "Simulating…" %}</span>
        </span>
        <div class="card-actions" data-rd-plan-toolbar>
          {% if can_edit %}
          <button type="button" class="btn btn-sm btn-outline-secondary" data-rd-plan-add-step>
            <i class="mdi mdi-plus" aria-hidden="true"></i> {% trans "step" %}
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" data-rd-plan-auto>
            <i class="mdi mdi-sort" aria-hidden="true"></i> {% trans "Auto-order" %}
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary {% if not plan.steps %}d-none{% endif %}"
                  data-rd-plan-reset
                  title="{% trans 'Rebuild the plan in the order the actions were created in the editor' %}">
            <i class="mdi mdi-restore" aria-hidden="true"></i> {% trans "Reset plan" %}
          </button>
          <span class="text-muted small ms-2 me-2 rd-plan-save-status" data-rd-plan-save-status
                title="{% trans 'Changes to the plan are saved automatically.' %}"></span>
          {% endif %}
          {# Export: the work-order API renders both files (workorder.render_markdown / render_csv). #}
          <div class="btn-group" data-rd-plan-export>
            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false" {% if not plan.steps %}disabled{% endif %}>
              <i class="mdi mdi-export" aria-hidden="true"></i> {% trans "Export" %}
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" data-rd-export-md download="{{ design.pk }}-work-order.md"
                     href="{{ plan.urls.workOrder }}?output=md">{% trans "Checklist (Markdown)" %}</a></li>
              <li><a class="dropdown-item" data-rd-export-csv download="{{ design.pk }}-work-order.csv"
                     href="{{ plan.urls.workOrder }}?output=csv">{% trans "Actions (CSV)" %}</a></li>
            </ul>
          </div>
        </div>
      </h2>
      <div class="card-body">
        <div class="alert alert-danger d-none" data-rd-plan-error role="alert"></div>
        <div data-rd-plan-root></div>
        <noscript>{% trans "The execution plan needs JavaScript." %}</noscript>
      </div>
    </div>
  </div>
</div>
{{ plan|json_script:"rd-plan-data" }}
<script type="module" src="{% static 'netbox_rack_design/js/execution_plan.js' %}?v={{ asset_version }}"></script>
{% endblock content %}