{% extends 'base.html' %}
{% load static %}
{% block content %}
  {% include 'profile/header.html' %}
  {% load widget_tweaks %}

  {% include 'profile/drawer.html' %}
  <br><br><br><br>

  <div class="container animate__animated animate__delay-0.1s animate__fadeIn">
    <!-- کادر وظایف -->
    <div class="tasks-box">
      <h2 class="tasks-header">وظایف من در رسته {{ raste }}</h2>

      {% if activity_details %}
        <ul class="activity-list">
          
          {% for detail in activity_details %}
            <a href="{% url 'activity_details_list' detail.mainTask.id %}">
              <li class="activity-item">
                <!-- لینک به ریز فعالیت‌ها -->
                <strong>{{ detail.mainTask.mainTask }}</strong>
              </li>
            </a>
          {% endfor %}
        </ul>
      {% else %}
        <p class="no-tasks-message">هیچ وظیفه‌ای برای شما پیدا نشد.</p>
      {% endif %}
    </div>
  </div>

  <!-- استایل‌ها -->
  <style>
    /* Container برای مرکز کردن محتوا */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px;
      background-color: #f4f7f6;
      border-radius: 16px;
    }

    /* کادر وظایف */
    .tasks-box {
      background-color: #ffffff;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.05);
      border: 1px solid #e5e5e5;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .tasks-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 18px 50px rgba(0, 0, 0, 0.1);
    }

    /* عنوان کادر */
    .tasks-header {
      color: #2c3e50;
      font-size: 28px;
      margin-bottom: 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* لیست وظایف */
    .activity-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .activity-item {
      background-color: #f8f8f8;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-left: 4px solid #16a085;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .activity-item:hover {
      background-color: #e6f7f6;
      transform: translateX(5px);
    }

    .activity-item a {
      color: #34495e;
      font-size: 15px;
      text-decoration: none;
    }

    .activity-item a:hover {
      text-decoration: underline;
    }

    /* پیام اگر وظیفه‌ای پیدا نشد */
    .no-tasks-message {
      color: #7f8c8d;
      font-size: 18px;
      font-style: italic;
    }

    /* افکت‌های انیمیشنی برای وظایف */
    .tasks-box, .activity-item {
      opacity: 0;
      animation: fadeIn 0.6s forwards;
    }

    .tasks-box {
      animation-delay: 0.3s;
    }

    .activity-item {
      animation-delay: 0.5s;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
  </style>

{% endblock %}