{% extends "layouts/base.html" %}
{% block title %}Shared Folder - {{ item_path }}{% endblock %}
{% block head %}
<style>
.share-container {
max-width: 1200px;
margin: 4rem auto;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.share-header {
border-bottom: 1px solid #eee;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
}
.permission-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #e3f2fd;
color: #1976d2;
border-radius: 12px;
font-size: 0.875rem;
margin-left: 1rem;
}
.file-list-table {
width: 100%;
}
.file-list-table table {
width: 100%;
border-collapse: collapse;
}
.file-list-table th {
background: #f5f5f5;
padding: 1rem;
text-align: left;
font-weight: 600;
}
.file-list-table td {
padding: 1rem;
border-top: 1px solid #eee;
}
.file-icon {
width: 20px;
height: 20px;
margin-right: 0.5rem;
vertical-align: middle;
}
</style>
{% endblock %}
{% block content %}
<div class="share-container">
<div class="share-header">
<h1>
{{ item_path.split('/')[-1] if item_path else 'Shared Folder' }}
<span class="permission-badge">{{ permission }}</span>
</h1>
<p>{{ item_path }}</p>
</div>
<div class="file-list-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Last Modified</th>
<th>Size</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% if files %}
{% for item in files %}
<tr>
<td>
{% if item.is_dir %}
<img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
{{ item.name }}
{% else %}
<img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
{{ item.name }}
{% endif %}
</td>
<td>{{ item.last_modified[:10] if item.last_modified else '' }}</td>
<td>
{% if item.is_dir %}
--
{% else %}
{{ (item.size / 1024 / 1024)|round(2) }} MB
{% endif %}
</td>
<td>
{% if not item.is_dir and not disable_download %}
<a href="/share/{{ share_id }}/download?file_path={{ item.path }}" class="btn-small">Download</a>
{% endif %}
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="4" style="text-align: center; padding: 2rem; color: #999;">
This folder is empty
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
{% endblock %}