%# /templates/clipboard.html.ep

% layout 'default';
% title 'Clipboard';

<% content_for head => begin %>
    <link rel="stylesheet" href="/css/clipboard.css">
    <script src="/js/clipboard.js"></script>
<% end %>

<div class="admin-container">
    <div class="header-bar">
        <h1>📋 <span>Clipboard</span></h1>
        <div class="manage-actions">
            <button class="action-btn" onclick="openModal()">+ Add Content</button>
        </div>
    </div>

    <% if (my $msg = flash('message')) { %>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                showToast("<%= $msg %>", 'success');
            });
        </script>
    <% } %>

    <div class="section">
        <h2>Recent Clippings</h2>
        <div class="messages-list">
            <% my @messages = @{ stash('messages') // [] }; %>
            <% for my $message ( @messages ) { %>
                <div class="message-item">
                    <div class="item-actions">
                        <button class="btn-icon-copy" data-text="<%= $message->{raw} %>" onclick="copyToClipboard(this)" title="Copy to Clipboard">📋</button>
                        <button class="btn-icon-edit" data-text="<%= $message->{raw} %>" onclick="editMessage(<%= $message->{id} %>, this)" title="Edit">✎</button>
                        <button class="btn-icon-delete" onclick="removeMessage(<%= $message->{id} %>)" title="Delete">🗑️</button>
                    </div>
                    <span class="message-text"><%== $message->{text} %></span>
                </div>
            <% } %>
        </div>
    </div>
</div>

<!-- Add/Edit Content Modal -->
    <div id="contentModal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">Add New Content</h3>
                <span class="close-btn" onclick="closeModal()">&times;</span>
            </div>
            <form id="contentForm" method="post" action="/clipboard">
                <input type="hidden" name="id" id="messageId">
                <div class="form-group">
                    <label for="paste">Content</label>
                    <textarea name="paste" id="paste" class="game-input" placeholder="Paste content here..." onkeypress="textIn()"></textarea>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal()">Cancel</button>
                    <button type="submit" class="btn-save" id="submitBtn">💾 Submit Content</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="delete-modal-overlay" style="display: none;">
        <div class="delete-modal-content">
            <div class="delete-modal-header">
                <h3>Confirm Deletion</h3>
                <span class="delete-modal-close" onclick="closeDeleteModal()">&times;</span>
            </div>
            <div class="delete-modal-body">
                <p>Are you sure you want to delete this clipping?</p>
            </div>
            <div class="delete-modal-actions">
                <button type="button" class="btn-danger-confirm" id="confirmDeleteBtn">Delete</button>
            </div>
        </div>
    </div>