{% extends "layouts/dashboard.html" %}
{% block title %}Favorites - Retoor's Cloud Solutions{% endblock %}
{% block dashboard_head %}
<link rel="stylesheet" href="/static/css/components/file_browser.css">
{% endblock %}
{% block page_title %}Favorites{% endblock %}
{% block dashboard_actions %}
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
<button class="btn-outline" id="remove-favorite-selected-btn" disabled>Remove from Favorites</button>
{% endblock %}
{% block dashboard_content %}
{% if success_message %}
<div class="alert alert-success">
{{ success_message }}
</div>
{% endif %}
{% if error_message %}
<div class="alert alert-error">
{{ error_message }}
</div>
{% endif %}
<input type="text" class="file-search-bar" placeholder="Search favorites..." id="search-bar">
<div class="file-list-table">
<table>
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th>
<th>Name</th>
<th>Owner</th>
<th>Favorited on</th>
<th>Size</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="file-list-body">
{% if favorite_files %}
{% for item in favorite_files %}
<tr data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}">
<td><input type="checkbox" class="file-checkbox" data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}"></td>
<td>
{% if item.is_dir %}
<img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
<a href="/files?path={{ item.path }}">{{ item.name }}</a>
{% else %}
<img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
{{ item.name }}
{% endif %}
</td>
<td>{{ user.email }}</td>
<td>{{ item.favorited_on[:10] }}</td>
<td>
{% if item.is_dir %}
--
{% else %}
{{ (item.size / 1024 / 1024)|round(2) }} MB
{% endif %}
</td>
<td>
<div class="action-buttons">
{% if not item.is_dir %}
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
{% endif %}
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
<button class="btn-small btn-danger remove-favorite-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Remove</button>
</div>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="6" style="text-align: center; padding: 40px;">
<p>No favorite files.</p>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
<div id="share-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('share-modal')">&times;</span>
<h3>Share File</h3>
<p id="share-file-name"></p>
<div id="share-link-container" style="display: none;">
<input type="text" id="share-link-input" readonly class="form-input">
<button class="btn-primary" id="copy-share-link-btn">Copy Link</button>
<div id="share-links-list" class="share-links-list"></div>
</div>
<div id="share-loading">Generating share link...</div>
<div class="modal-actions">
<button type="button" class="btn-outline" onclick="closeModal('share-modal')">Close</button>
</div>
</div>
</div>
<div id="remove-favorite-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('remove-favorite-modal')">&times;</span>
<h3>Remove from Favorites</h3>
<p id="remove-favorite-message"></p>
<form id="remove-favorite-form" method="post">
<div class="modal-actions">
<button type="submit" class="btn-danger">Remove</button>
<button type="button" class="btn-outline" onclick="closeModal('remove-favorite-modal')">Cancel</button>
</div>
</form>
</div>
</div>
<script type="module" src="/static/js/main.js"></script>
{% endblock %}