<style>
  .status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
  }
  .status-badge.new { background: #dc3545; color: #fff; }
  .status-badge.read { background: #28a745; color: #fff; }
  .status-badge.processed { background: #17a2b8; color: #fff; }
  .status-badge.unprocessed { background: #ffc107; color: #212529; }
  .status-badge.sent { background: #6c757d; color: #fff; }
  .list-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
  }
  .list-item:last-child { border-bottom: none; }
  .list-item .meta { font-size: 0.9rem; color: var(--text-light); }
</style>

<h3>📞 Мои заявки на звонок</h3>
{% if callbacks %}
  {% for cb in callbacks %}
    <div class="list-item">
      <div>
        <strong>{{ cb.name }}</strong> 
        <span class="status-badge {% if cb.is_read %}read{% else %}new{% endif %}">
          {% if cb.is_read %}✅ Прочитано{% else %}🆕 Новое{% endif %}
        </span>
        <span class="status-badge {% if cb.is_processed %}processed{% else %}unprocessed{% endif %}">
          {% if cb.is_processed %}✅ Обработано{% else %}⏳ В обработке{% endif %}
        </span>
      </div>
      <div class="meta">
        {{ cb.time_create|date:"d.m.Y H:i" }} • 
        📞 {{ cb.phone }} • 
        ✉️ {{ cb.email|default:"email не указан" }}
        {% if cb.question %}
          <br><span style="font-style:italic;">{{ cb.question|truncatechars:80 }}</span>
        {% endif %}
      </div>
    </div>
  {% endfor %}
{% else %}
  <p>Заявок пока нет.</p>
{% endif %}

<hr>

<h3>🛒 Мои заказы</h3>
{% if orders %}
  {% for order in orders %}
    <div class="list-item">
      <div>
        <strong>{{ order.product.title }}</strong>
        <span class="status-badge {% if order.is_processed %}processed{% else %}unprocessed{% endif %}">
          {% if order.is_processed %}✅ Обработан{% else %}⏳ В обработке{% endif %}
        </span>
        {% if order.notification_sent %}
          <span class="status-badge sent">📨 Уведомление отправлено</span>
        {% endif %}
      </div>
      <div class="meta">
        {{ order.created_at|date:"d.m.Y H:i" }} • 
        📞 {{ order.phone }} • 
        ✉️ {{ order.email }}
        {% if order.configuration %}
          <br>⚙️ Конфигурация: {{ order.configuration.name }}
        {% endif %}
        {% if order.comment %}
          <br><span style="font-style:italic;">{{ order.comment|truncatechars:80 }}</span>
        {% endif %}
      </div>
    </div>
  {% endfor %}
{% else %}
  <p>Заказов пока нет.</p>
{% endif %}