{% extends 'base.html' %}

{% block body %}
    <h2 class="text-center text-2xl mt-8 mb-4"> Export data as CSV </h2>
    <div id="export_btns" class="p-4 h-full flex flex-col items-center">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Customers' Data: </span>
            <button id="Customer" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Reservations' Data: </span>
            <button id="Reservation" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Rooms' Data: </span>
            <button id="Room" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Room Types' Data: </span>
            <button id="Room_Type" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Transactions' Data: </span>
            <button id="Transaction" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Employees' Data: </span>
            <button id="Employee" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
        <hr class="w-[60%] -mb-2">
        <div class="flex items-center my-4 justify-between w-[50%]">
            <span class="mr-16 pt-3"> Export Jobs' Data: </span>
            <button id="Job" class="rounded-lg shadow-md px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white transition-all duration-300 mt-4"> Export </button>
        </div>
    </div>
{% endblock body %}
{% block script %}
    <script src="../static/export_script.js"></script>
{% endblock script %}