{% comment %}
Adtlas Activities Base Template

Base template for the activities app providing common layout,
styles, and JavaScript functionality for activity-related pages.

Features:
- Responsive design with Bootstrap integration
- Activity-specific navigation and breadcrumbs
- Common JavaScript utilities for activity management
- Real-time activity updates via WebSocket
- Export functionality
- Search and filtering capabilities

Author: Adtlas Development Team
Version: 1.0.0
Last Updated: 2025-01-27
{% endcomment %}

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

{% block title %}
    {% block page_title %}{% trans "Activities" %}{% endblock %} - {{ block.super }}
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'activities/css/activities.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css">
    {% block activities_css %}{% endblock %}
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="{% static 'activities/js/activities.js' %}"></script>
    {% block activities_js %}{% endblock %}
{% endblock %}

{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'dashboard:index' %}">
                    <i class="fas fa-home"></i> {% trans "Dashboard" %}
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'activities:activity_list' %}">
                    <i class="fas fa-history"></i> {% trans "Activities" %}
                </a>
            </li>
            {% block activities_breadcrumb %}{% endblock %}
        </ol>
    </nav>
{% endblock %}

{% block content %}
    <div class="activities-container">
        <!-- Page Header -->
        <div class="page-header mb-4">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title">
                        <i class="{% block page_icon %}fas fa-history{% endblock %}"></i>
                        {% block page_heading %}{% trans "Activities" %}{% endblock %}
                    </h1>
                    {% block page_description %}
                        <p class="text-muted mb-0">
                            {% trans "Track and monitor system activities and user actions" %}
                        </p>
                    {% endblock %}
                </div>
                <div class="col-md-6 text-end">
                    {% block page_actions %}
                        <div class="btn-group" role="group">
                            <a href="{% url 'activities:activity_list' %}" 
                               class="btn btn-outline-primary">
                                <i class="fas fa-list"></i> {% trans "All Activities" %}
                            </a>
                            <a href="{% url 'activities:activity_dashboard' %}" 
                               class="btn btn-outline-info">
                                <i class="fas fa-chart-bar"></i> {% trans "Dashboard" %}
                            </a>
                            {% if perms.activities.export_activity %}
                                <button type="button" 
                                        class="btn btn-outline-success" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#exportModal">
                                    <i class="fas fa-download"></i> {% trans "Export" %}
                                </button>
                            {% endif %}
                        </div>
                    {% endblock %}
                </div>
            </div>
        </div>

        <!-- Activity Navigation -->
        {% block activity_navigation %}
            <div class="activity-nav mb-4">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'activity_list' %}active{% endif %}" 
                           href="{% url 'activities:activity_list' %}">
                            <i class="fas fa-list"></i> {% trans "All Activities" %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'activity_dashboard' %}active{% endif %}" 
                           href="{% url 'activities:activity_dashboard' %}">
                            <i class="fas fa-chart-bar"></i> {% trans "Dashboard" %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if 'my-activities' in request.path %}active{% endif %}" 
                           href="{% url 'activities:user_activities' user.id %}">
                            <i class="fas fa-user"></i> {% trans "My Activities" %}
                        </a>
                    </li>
                    {% if perms.activities.view_activity_analytics %}
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#analyticsModal">
                                <i class="fas fa-analytics"></i> {% trans "Analytics" %}
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        {% endblock %}

        <!-- Messages -->
        {% if messages %}
            <div class="messages mb-4">
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <!-- Main Content -->
        <div class="activities-content">
            {% block activities_content %}
                <!-- Content will be provided by child templates -->
            {% endblock %}
        </div>

        <!-- Real-time Activity Feed -->
        {% block activity_feed %}
            <div id="activity-feed" class="activity-feed d-none">
                <div class="feed-header">
                    <h6 class="mb-0">
                        <i class="fas fa-broadcast-tower"></i> {% trans "Live Activity Feed" %}
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="feed"></button>
                </div>
                <div class="feed-content">
                    <!-- Real-time activities will be populated here -->
                </div>
            </div>
        {% endblock %}
    </div>

    <!-- Export Modal -->
    {% if perms.activities.export_activity %}
        {% include "activities/modals/export_modal.html" %}
    {% endif %}

    <!-- Analytics Modal -->
    {% if perms.activities.view_activity_analytics %}
        {% include "activities/modals/analytics_modal.html" %}
    {% endif %}

    <!-- Activity Detail Modal -->
    <div class="modal fade" id="activityDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-info-circle"></i> {% trans "Activity Details" %}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Activity details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {% trans "Close" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_js %}
    {{ block.super }}
    <script>
        // Initialize activities functionality
        $(document).ready(function() {
            // Initialize activity management
            if (typeof ActivityManager !== 'undefined') {
                window.activityManager = new ActivityManager({
                    apiUrl: '{% url "activities:api_activity_list" %}',
                    csrfToken: '{{ csrf_token }}',
                    userId: {{ user.id|default:'null' }},
                    permissions: {
                        canView: {% if perms.activities.view_activity %}true{% else %}false{% endif %},
                        canExport: {% if perms.activities.export_activity %}true{% else %}false{% endif %},
                        canAnalyze: {% if perms.activities.view_activity_analytics %}true{% else %}false{% endif %}
                    }
                });
            }

            // Initialize real-time updates if WebSocket is available
            {% if user.is_authenticated %}
                if (typeof WebSocket !== 'undefined') {
                    window.activityWebSocket = new WebSocket(
                        'ws://' + window.location.host + '/ws/activities/'
                    );
                    
                    window.activityWebSocket.onmessage = function(event) {
                        const data = JSON.parse(event.data);
                        if (data.type === 'activity_update') {
                            handleActivityUpdate(data.activity);
                        }
                    };
                }
            {% endif %}

            // Initialize tooltips and popovers
            $('[data-bs-toggle="tooltip"]').tooltip();
            $('[data-bs-toggle="popover"]').popover();
        });

        // Handle real-time activity updates
        function handleActivityUpdate(activity) {
            // Update activity feed
            const feedElement = document.getElementById('activity-feed');
            if (feedElement && !feedElement.classList.contains('d-none')) {
                const activityHtml = renderActivityItem(activity);
                const feedContent = feedElement.querySelector('.feed-content');
                feedContent.insertAdjacentHTML('afterbegin', activityHtml);
                
                // Limit feed to 10 items
                const items = feedContent.querySelectorAll('.activity-item');
                if (items.length > 10) {
                    items[items.length - 1].remove();
                }
            }
            
            // Trigger custom event for other components
            $(document).trigger('activity:updated', [activity]);
        }

        // Render activity item HTML
        function renderActivityItem(activity) {
            const timeAgo = moment(activity.created_at).fromNow();
            const userDisplay = activity.user ? activity.user.email : '{% trans "System" %}';
            const statusIcon = activity.is_successful ? 
                '<i class="fas fa-check-circle text-success"></i>' : 
                '<i class="fas fa-times-circle text-danger"></i>';
            
            return `
                <div class="activity-item border-bottom py-2">
                    <div class="d-flex align-items-center">
                        <div class="activity-icon me-2">${statusIcon}</div>
                        <div class="activity-content flex-grow-1">
                            <div class="activity-action fw-bold">${activity.action}</div>
                            <div class="activity-user text-muted small">${userDisplay}</div>
                        </div>
                        <div class="activity-time text-muted small">${timeAgo}</div>
                    </div>
                </div>
            `;
        }
    </script>
    {% block activities_footer_js %}{% endblock %}
{% endblock %}