{% extends 'carers/dashboard_layout.html' %}

{% load widget_tweaks static %}

{% block content %}

<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">

    <!-- Breadcrumb Start -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
        <nav class="ml-auto">
            <ol class="flex items-center gap-2">
                <li>
                    <a class="font-medium" href="index.html">
                        Dashboard /
                    </a>
                </li>
                <li class="font-medium text-primary">
                    Organiations
                </li>
            </ol>
        </nav>
    </div>
    <!-- Breadcrumb End -->

    <form method="post" enctype="multipart/form-data" class="p-10 bg-white rounded-md flex items-start">
        {% csrf_token %}

        <h2 class="mb-2 text-2xl md:text-3xl text-left">
            Upload users via .xlsx file
        </h2>
    <p>
        <ol>
        <li>1. Download this file. <a class="text-white bg-indigo-950 py-2 px-4" href="{% static 'media/peopleoo_upload.xlsx' %}">Click Here</a> </li>
        <li>2. Add staff or admins. (Have separate files for staff and admin)</li>
        <li>3. Add first name, last name and email. Do not change row 1, do not add extra columns.</li>
        <li>4. Use the form below to upload the file.</li>
    </ol>
    </p>

        <!-- Add a class to the input -->
        {{ form.file|add_class:"w-full p-2 rounded-md border-indigo-950 border cursor-pointer duration-300 hover:opacity-60 overflow-hidden" }}

        {% if form.errors %}
            <div class="mt-2 form-errors">
                <ul>
                    {% for field in form %}
                        {% for error in field.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        <button type="submit" class="mt-2 mr-auto w-auto inline-block bg-primary text-white py-3 px-12 font-bold rounded-md hover:opacity-60 duration-300">
            Upload
        </button>
    </form>
</div>

{% endblock %}