{% extends "base.html" %}

{% block title %}NOTIFICATIONS - BTC-OS MINING DASHBOARD {% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/css/notifications.css">
<link rel="stylesheet" href="/static/css/theme-toggle.css">
{% endblock %}

{% block header %}NOTIFICATION CENTER v 0.1{% endblock %}

{% block notifications_active %}active{% endblock %}

{% block content %}
<!-- Notification Controls -->
<div class="row mb-2">
    <div class="col-12">
        <div class="card">
            <div class="card-header">NOTIFICATION CONTROLS</div>
            <div class="card-body">
                <div class="notification-controls">
                    <div class="filter-buttons">
                        <button class="filter-button active" data-filter="all">All</button>
                        <button class="filter-button" data-filter="hashrate">Hashrate</button>
                        <button class="filter-button" data-filter="block">Blocks</button>
                        <button class="filter-button" data-filter="worker">Workers</button>
                        <button class="filter-button" data-filter="earnings">Earnings</button>
                        <button class="filter-button" data-filter="system">System</button>
                    </div>
                    <div class="notification-actions">
                        <button id="mark-all-read" class="action-button">Mark All as Read</button>
                        <button id="clear-read" class="action-button">Clear Read Notifications</button>
                        <button id="clear-all" class="action-button danger">Clear All</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Notifications List -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <span>NOTIFICATIONS</span>
                <span id="unread-badge" class="unread-badge">0</span>
            </div>
            <div class="card-body">
                <div id="notifications-container">
                    <!-- Notifications will be populated here by JavaScript -->
                    <div class="loading-message">Loading notifications<span class="terminal-cursor"></span></div>
                </div>

                <!-- Pagination -->
                <div class="pagination-controls">
                    <button id="load-more" class="load-more-button">LOAD MORE</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Empty State Template (hidden) -->
<div id="empty-template" style="display:none;">
    <div class="empty-state">
        <i class="fas fa-bell-slash"></i>
        <p>No notifications to display</p>
    </div>
</div>

<!-- Notification Template (hidden) -->
<div id="notification-template" style="display:none;">
    <div class="notification-item" data-id="">
        <div class="notification-icon">
            <i class="fas"></i>
        </div>
        <div class="notification-content">
            <div class="notification-message"></div>
            <div class="notification-meta">
                <span class="notification-time"></span>
                <span class="notification-category"></span>
            </div>
        </div>
        <div class="notification-actions">
            <button class="mark-read-button"><i class="fas fa-check"></i></button>
            <button class="delete-button"><i class="fas fa-trash"></i></button>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script src="/static/js/notifications.js"></script>
{% endblock %}