{% extends "admin_base.html" %}
{% load static %}

{% block title %}Subscribers Management{% endblock %}

{% block extra_css %}
<style>

    /* Custom styles for the subscriber table */

/* Add a subtle hover effect to table rows */
.subscriber-table tr:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Status badge animations */
.status-badge {
    transition: all 0.3s ease;
}

.status-badge:hover {
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .subscriber-table th,
    .subscriber-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .subscriber-table .mobile-hidden {
        display: none;
    }
    
    .subscriber-table .status-badge {
        padding: 0.15rem 0.5rem;
        font-size: 0.65rem;
    }
}

/* Search input animation */
.search-input:focus {
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

/* Pagination hover effects */
.pagination-link {
    transition: all 0.2s ease;
}

.pagination-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add animation to mail icon */
.mail-icon {
    transition: all 0.2s ease;
}

.mail-icon:hover {
    transform: scale(1.2);
    color: #3b82f6;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
    // JavaScript for enhancing subscriber table functionality

document.addEventListener('DOMContentLoaded', function() {
    // Add fade-in animation for table rows
    const tableRows = document.querySelectorAll('.subscriber-table tbody tr');
    tableRows.forEach((row, index) => {
        row.style.opacity = '0';
        row.style.animation = `fadeIn 0.3s ease forwards ${index * 0.05}s`;
    });

    // Add debounce to search input
    const searchInput = document.querySelector('.search-input');
    let timeout = null;
    
    searchInput.addEventListener('input', function(e) {
        clearTimeout(timeout);
        
        timeout = setTimeout(function() {
            // Only auto-submit if at least 3 characters or empty
            if (e.target.value.length >= 3 || e.target.value.length === 0) {
                e.target.form.submit();
            }
        }, 500);
    });

    // Add copy email functionality
    const emailCells = document.querySelectorAll('.subscriber-table td:nth-child(2)');
    
    emailCells.forEach(cell => {
        cell.style.cursor = 'pointer';
        
        cell.addEventListener('click', function() {
            const email = this.textContent.trim();
            navigator.clipboard.writeText(email)
                .then(() => {
                    // Show a tooltip/notification
                    const tooltip = document.createElement('div');
                    tooltip.textContent = 'Email copied!';
                    tooltip.className = 'copy-tooltip';
                    tooltip.style.position = 'absolute';
                    tooltip.style.backgroundColor = '#4CAF50';
                    tooltip.style.color = 'white';
                    tooltip.style.padding = '5px 10px';
                    tooltip.style.borderRadius = '4px';
                    tooltip.style.fontSize = '12px';
                    tooltip.style.zIndex = '1000';
                    tooltip.style.opacity = '0';
                    tooltip.style.transition = 'opacity 0.3s ease';
                    
                    // Position near the email
                    const rect = this.getBoundingClientRect();
                    tooltip.style.top = `${rect.top - 30}px`;
                    tooltip.style.left = `${rect.left + rect.width / 2 - 40}px`;
                    
                    document.body.appendChild(tooltip);
                    
                    // Show and hide the tooltip
                    setTimeout(() => { tooltip.style.opacity = '1'; }, 10);
                    setTimeout(() => { 
                        tooltip.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(tooltip);
                        }, 300);
                    }, 2000);
                })
                .catch(err => {
                    console.error('Failed to copy email: ', err);
                });
        });
    });

    // Add CSS animation
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    `;
    document.head.appendChild(style);
});
</script>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">Subscribers</h1>
        
        <!-- Search Form -->
        <form method="GET" class="w-full md:w-96">
            <div class="relative">
                <input 
                    type="text" 
                    name="search" 
                    value="{{ request.GET.search|default:'' }}"
                    placeholder="Search by name or email..." 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all search-input"
                >
                <button type="submit" class="absolute right-2 top-2 text-gray-500 hover:text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </button>
            </div>
        </form>
    </div>

    <!-- Subscribers Table -->
    <div class="overflow-x-auto bg-white rounded-lg shadow">
        <table class="min-w-full divide-y divide-gray-200 subscriber-table">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Name
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Email
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for subscriber in subscribers %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ subscriber.name }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-500">{{ subscriber.email }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if subscriber.is_active %}
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 status-badge">
                            Subscribed
                        </span>
                        {% else %}
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 status-badge">
                            Unsubscribed
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <a href="mailto:{{ subscriber.email }}" class="text-blue-600 hover:text-blue-900">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mail-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="px-6 py-10 text-center text-gray-500">
                        No subscribers found.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if subscribers.has_other_pages %}
    <div class="mt-6 flex justify-center">
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if subscribers.has_previous %}
            <a href="?page={{ subscribers.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 pagination-link">
                <span class="sr-only">Previous</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                <span class="sr-only">Previous</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
            </span>
            {% endif %}
            
            {% for num in paginator.page_range %}
                {% if subscribers.number == num %}
                <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600">{{ num }}</span>
                {% elif num > subscribers.number|add:'-3' and num < subscribers.number|add:'3' %}
                <a href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 pagination-link">{{ num }}</a>
                {% endif %}
            {% endfor %}
            
            {% if subscribers.has_next %}
            <a href="?page={{ subscribers.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 pagination-link">
                <span class="sr-only">Next</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                <span class="sr-only">Next</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </span>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}