{% extends "layouts/base.html" %}

{% block title %}Shared File - {{ file_name }}{% endblock %}

{% block head %}
    <style>
        .share-container {
            max-width: 800px;
            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;
        }
        .file-icon-large {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            display: block;
        }
        .file-info {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }
        .file-info dt {
            font-weight: 600;
        }
        .file-actions {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        .permission-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: #e3f2fd;
            color: #1976d2;
            border-radius: 12px;
            font-size: 0.875rem;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="share-container">
        <div class="share-header">
            <img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon-large">
            <h1>{{ file_name }}</h1>
            <span class="permission-badge">{{ permission }}</span>
        </div>

        <dl class="file-info">
            <dt>File Name</dt>
            <dd>{{ file_name }}</dd>

            <dt>Size</dt>
            <dd>{{ (file_size / 1024 / 1024)|round(2) }} MB</dd>

            <dt>Path</dt>
            <dd>{{ item_path }}</dd>

            <dt>Permission</dt>
            <dd>{{ permission }}</dd>
        </dl>

        <div class="file-actions">
            {% if not disable_download %}
                <a href="/share/{{ share_id }}/download" class="btn-primary" download>Download File</a>
            {% else %}
                <button class="btn-outline" disabled>Download Disabled</button>
            {% endif %}
        </div>
    </div>
{% endblock %}