{% extends "drive/layout.html" %}
{% block body %}
    {% if user.is_authenticated %}
        <div class="flex-grow-1" style="background: black;">
            <div class="container-fluid p-2">
                {% if not shared_files.count %}
                    <div class="alert alert-info" role="alert">
                        You haven't shared any files yet!
                    </div>
                {% else %}
                    <div class="d-flex p-2 mb-1 border bg-light">
                        <div class="text-dark col-7 fw-bold">File Name</div>
                        <div class="text-dark col-md-3 d-none d-md-block fw-bold">Shared with</div>
                        <div class="text-dark text-center col-md-2 col-sm-5 fw-bold sp-width-100">Actions</div>
                </div>
                    {% for file in shared_files %}
                        <div class="d-flex p-2 border border-dark my-1 file">
                            <div class="col-7 fields">{{ file.name }}</b></div>
                            <div class="col-md-3 d-none d-md-block fields">{{ file.access_permissions }}</div>
                            <div class="col-md-2 col-sm-5 fields d-flex justify-content-center sp-width-100">
                                <div class="me-3">
                                    <a href="{% url 'download' file.id %}"><i class="fa fa-cloud-download fa-2x" aria-hidden="true"></i></a>
                                </div>
                                <div>
                                    <a href="{% url 'file' file.id %}"><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
    {% else %}
        <div class="container-fluid vh-100 d-flex flex-column align-items-center justify-content-center" style="background: black;">
            <h1 class="tagline">Share Moments, Store Dreams</h1>
            <a href="{% url 'login' %}" class="btn btn-outline-info btn-lg">Login</a>
    {% endif %}
    </div>

{% endblock %}