{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.diets %} {% endblock %}
{% block sidebar.cards %} class="active" {% endblock %}

{% block content %}
    <!-- Include external CSS -->
    <link rel="stylesheet" href="{% static 'css/cards.css' %}">

    <div class="content">
        <div class="full-width-container">
            <div class="row">
                <!-- Card Creation Section -->
                <div class="col-md-8">
                    {% include 'assistant/components/card_creation.html' %}
                </div>
                
                <!-- Food List Section -->
                <div class="col-md-4">
                    {% include 'assistant/components/food_list.html' %}
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    {% include 'assistant/components/calorie_modal.html' %}
    {% include 'assistant/components/nutrition_modal.html' %}

    <!-- Include external JavaScript modules -->
    <script src="{% static 'js/card-manager.js' %}"></script>
    <script src="{% static 'js/card-filters.js' %}"></script>
    <script src="{% static 'js/card-deletion.js' %}"></script>
    <script src="{% static 'js/card-pagination.js' %}"></script>

    <!-- Initialize all modules -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize all modules
            if (window.cardManager) {
                console.log('Card Manager initialized');
            }
            if (window.cardFilters) {
                console.log('Card Filters initialized');
            }
            if (window.cardDeletion) {
                console.log('Card Deletion initialized');
            }
            if (window.cardPagination) {
                console.log('Card Pagination initialized');
            }
        });
    </script>
{% endblock %}