{% extends 'base.html' %} 
{% load static %} 
{% block title%} News Admin{% endblock %} 
{% block content %}
<div class="bg-gray-100 text-gray-900">
    <div class="container mx-auto p-4">
        <div class="flex justify-between mb-2">
            <h1 class="text-xl font-bold text-center text-lime-600">News Administration</h1>
            <div class="flex">
                <a class="text-white bg-lime-600 hover:bg-lime-700 inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm" href="{% url 'create_news' %}">
                    Add News
                </a>
            </div>
        </div>
        <table class="min-w-full bg-white">
            <thead>
                <tr>
                    <th class="py-2 px-4 border-b">Image</th>
                    <th class="py-2 px-4 border-b">Date</th>
                    <th class="py-2 px-4 border-b">Headline</th>
                    <th class="py-2 px-4 border-b">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for item in news_items %}
                
                <tr>
                    <td class="py-2 px-4 border-b">
                        {% if item.image %}
                            <img src="{{ item.image.url }}" alt="Image for {{ item.headline }}" class="w-20 h-20 object-cover rounded">
                        {% else %}
                            <span class="text-gray-500">No Image</span>
                        {% endif %}
                    </td>
                    <td class="py-2 px-4 border-b"> Published on {{ item.updated_at|date:"F j, Y" }}</td>
                    <td class="py-2 px-4 border-b">{{ item.headline }}</td>
                    <td class="py-2 px-4 border-b">
                        <a href="{% url 'edit_news' item.id %}" class="text-lime-500 hover:text-lime-600 hover:underline">Edit</a>
                        <a href="{% url 'news_detail' item.id %}" class="text-cyan-500 hover:text-cyan-600 hover:underline ml-2">View</a>
                        <a href="{% url 'delete_news' item.id %}" class="text-red-500 hover:text-red-600 hover:underline ml-2">Delete</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}