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


{% block header.add_script %}
    <style rel="stylesheet">
        .dropdown-menu li {
        position: relative;
        }
        .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
        }
        .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto;
        }
        .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
        }
        .resource-item {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
        }
        .resource-actions {
            float: right;
        }
        .resource-info {
            margin-bottom: 10px;
        }
        .resource-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 0.8em;
            color: white;
        }
        .resource-type.video {
            background-color: #dc3545;
        }
        .resource-type.pdf {
            background-color: #007bff;
        }
        .resource-type.image_series {
            background-color: #28a745;
        }
        .resource-status {
            margin-top: 5px;
        }
        .status-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8em;
            color: white;
        }
        .status-published {
            background-color: #28a745;
        }
        .status-draft {
            background-color: #6c757d;
        }
        .status-featured {
            background-color: #ffc107;
            color: #212529;
        }
    </style>
{% endblock %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.resources %} class="active" {% endblock %}


{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-4 col-3">
                <h4 class="page-title">{% trans "مدیریت محتوا" %}</h4>
            </div>
            <div class="col-sm-8 col-9 text-right m-b-20">
                <a href="{% url 'panel-manager-create-resource' %}" class="btn btn btn-primary btn-rounded float-right">
                    <i class="fa fa-plus"></i> {% trans "افزودن محتوا" %}
                </a>
            </div>
        </div>
        
        {% if messages %}
            <div class="row">
                <div class="col-md-12">
                    {% for message in messages %}
                        <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <div class="row">
            <div class="col-md-12">
                {% if resources_list %}
                    {% for resource in resources_list %}
                        <div class="resource-item">
                            <div class="resource-actions">
                                <a href="{% url 'panel-manager-edit-resource' resource.id %}" class="btn btn-sm btn-info">
                                    <i class="fa fa-edit"></i> {% trans "ویرایش" %}
                                </a>
                                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete_resource_{{ resource.id }}">
                                    <i class="fa fa-trash"></i> {% trans "حذف" %}
                                </button>
                            </div>
                            
                            <div class="resource-info">
                                <h5><strong>{{ resource.title }}</strong></h5>
                                {% if resource.description %}
                                    <p>{{ resource.description }}</p>
                                {% endif %}
                                
                                <div class="resource-meta">
                                    <span class="resource-type {{ resource.type }}">
                                        {% if resource.type == 'video' %}
                                            {% trans "ویدیو" %}
                                        {% elif resource.type == 'pdf' %}
                                            {% trans "PDF" %}
                                        {% elif resource.type == 'image_series' %}
                                            {% trans "سری تصاویر" %}
                                        {% endif %}
                                    </span>
                                    
                                    <span class="resource-category">
                                        <i class="fa fa-folder"></i> {{ resource.category.name }}
                                    </span>
                                    
                                    <span class="resource-views">
                                        <i class="fa fa-eye"></i> {{ resource.view_count }} {% trans "بازدید" %}
                                    </span>
                                </div>
                                
                                <div class="resource-status">
                                    {% if resource.is_published %}
                                        <span class="status-badge status-published">{% trans "منتشر شده" %}</span>
                                    {% else %}
                                        <span class="status-badge status-draft">{% trans "پیش‌نویس" %}</span>
                                    {% endif %}
                                    
                                    {% if resource.is_featured %}
                                        <span class="status-badge status-featured">{% trans "ویژه" %}</span>
                                    {% endif %}
                                </div>
                                
                                <div class="resource-dates">
                                    <small class="text-muted">
                                        {% trans "ایجاد شده در:" %} {{ resource.created_at|date:"Y/m/d H:i" }}
                                        {% if resource.updated_at != resource.created_at %}
                                            | {% trans "آخرین ویرایش:" %} {{ resource.updated_at|date:"Y/m/d H:i" }}
                                        {% endif %}
                                    </small>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center">
                        <p>{% trans "هیچ محتوایی یافت نشد." %}</p>
                        <a href="{% url 'panel-manager-create-resource' %}" class="btn btn-primary">
                            {% trans "ایجاد اولین محتوا" %}
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block delete %}
    {% for resource in resources_list %}
        <div id="delete_resource_{{ resource.id }}" class="modal fade delete-modal" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <img src="{% static 'panel/doctor' %}/img/sent.png" alt="" width="50" height="46">
                        <h3>{% trans "آیا از حذف محتوا" %} "{{ resource.title }}" {% trans "مطمئن هستید؟" %}</h3>
                        <p>{% trans "این عمل غیرقابل بازگشت است." %}</p>
                        <div class="m-t-20"> 
                            <a href="#" class="btn btn-white" data-dismiss="modal">{% trans "بستن" %}</a>
                            <form method="post" action="{% url 'panel-manager-delete-resource' resource.id %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger">{% trans "حذف" %}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}


{% block script %}
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>
{% endblock %}