{% extends 'base.html' %}
{% block title %}{{ title }} | Learning management system{% endblock title %}
{% load static %}

{% block content %}

<style>
    .color-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

    .bg-purple {
        background-color: #6f42c1;
    }

    .card-header-ne {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-header-ne .title {
        vertical-align: middle;
    }
</style>

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>

{% if request.user.is_superuser %}
<div class="manage-wrap">
    <a class="btn btn-primary" href="{% url 'add_item' %}"><i class="fas fa-plus"></i> Add New Post</a>
</div>
{% endif %}

{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
    <i class="fas fa-exclamation-circle"></i>{{ message }}
</div>
{% else %}
<div class="alert alert-success">
    <i class="fas fa-check-circle"></i>{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}

<div>
    <div class="title-1">News &amp; Events</div>
</div>

<div class="col-md-2 ms-auto d-flex">
    <div class="me-3">
        <span class="color-indicator bg-primary"></span> News
    </div>
    <div>
        <span class="color-indicator bg-purple"></span> Events
    </div>
</div>

<div class="container-fluid">
    {% if items %}
    <div class="row">
        {% for item in items %}
        <div class="col-md-4 mb-4">
            <div class="bg-white border">
                <div class="card-header-ne {% if item.posted_as == 'News' %}news{% else %}events{% endif %} p-2">
                    <span class="p-0">
                        {{ item.title|title }}
                    </span>
                    {% if request.user.is_superuser %}
                    <div class="dropstart">
                        <button class="btn btn-sm" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-ellipsis-v text-white"></i>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{% url 'edit_post' pk=item.id %}"><i
                                    class="fas fa-pencil-alt"></i> Edit</a>
                            <a class="dropdown-item" href="{% url 'delete_post' pk=item.id %}"><i
                                    class="fas fa-trash-alt"></i> Delete</a>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="p-2">{{ item.summary }}</div>

                <div class="date-wrapper">
                    <i class="fa fa-calendar mr-2"></i>
                    {{ item.updated_date|timesince }} ago
                </div>

            </div>
        </div>
        {% endfor %}
    </div>

    {% else %}
    <h4 class="text-center mt-5 py-5 text-muted">
        <i class="fa-regular fa-folder-open me-2"></i> School news and events will appear here.
    </h4>

    {% endif %}

</div>

{% endblock content %}