{% load static %}

<div class="bs-stepper-header">
  {% for item in steps_context %}
    {% with step=item.step status=item.status can_access=item.can_access is_selected=item.is_selected is_todo=item.is_todo %}
    <div class="step 
      {% if not can_access %}disabled
      {% elif status == 'completed' %}completed
      {% elif status == 'rejected' %}rejected
      {% elif is_todo %}active
      {% endif %}
      {% if is_selected %} selected{% endif %}" 
      data-target="#step-{{ step.id }}">
      
      {% if can_access %}
        <a href="{% url 'processes:step_detail' instance.id step.id %}" 
           class="step-trigger text-decoration-none p-0" 
           aria-selected="{% if is_selected %}true{% else %}false{% endif %}">
      {% else %}
        <span class="step-trigger">
      {% endif %}
      
        <span class="bs-stepper-circle {% if status == 'rejected' %}bg-danger text-white{% endif %}">{{ forloop.counter }}</span>
        <span class="bs-stepper-label mt-1">
          <span class="bs-stepper-title {% if status == 'rejected' %}text-danger{% endif %}">{{ step.name }}</span>
          <span class="bs-stepper-subtitle">{{ step.description|default:' ' }}</span>
        </span>
        
      {% if can_access %}
        </a>
      {% else %}
        </span>
      {% endif %}
    </div>
    {% endwith %}
    {% if not forloop.last %}<div class="line"></div>{% endif %}
  {% endfor %}
</div>

<style>
.step.disabled .step-trigger { opacity: 0.5; cursor: not-allowed; }
.step.disabled .bs-stepper-circle { background-color: #6c757d; }

/* تکمیل شده */
.step.completed .bs-stepper-circle { background-color: #28a745 !important; color: #fff !important; border-color: #28a745 !important; }
.step.completed .bs-stepper-title { color: #28a745 !important; }

/* مرحله‌ای که باید انجام شود (فعلی سیستم) */
.step.active .bs-stepper-circle { background-color: #696cff; color: #fff; }
.step.active .bs-stepper-title { color: #696cff; }

/* مرحله انتخاب‌شده (نمایش فعلی صفحه) */
.step.selected { outline: 1px solid #696cff; border-radius: 8px; }
.step.selected .bs-stepper-circle { box-shadow: 0 0 0 3px rgba(13,202,240,.25); }
</style>
