{% load static %}
<html>
{% block head %}{% include 'core/base/_head.html' %}{% endblock %}
<body>
<div class="min-h-screen bg-base-200 flex items-center">
    <div class="card my-4 mx-auto w-full max-w-5xl shadow-xl">
        <div class="grid  md:grid-cols-2 grid-cols-1  bg-base-100 rounded-xl">
            <div class="hero rounded-l-xl bg-base-200">
                <div class="hero-content py-12 min-h-full">
                    <div class="max-w-md">
                        <h1 class="text-3xl text-center font-bold ">Dashboard</h1>
                        <div class="text-center mt-12 mb-24">
                            <img src="{% block image %}{% endblock image %}" class="w-48 inline-block">
                        </div>
                        {% block details %}
                            <h1 class="text-2xl mt-8 mb-4 font-bold text-center">
                                What do you get to manage?
                            </h1>
                            <p class="py-2">✓ Client Lists</p>
                            <p class="py-2">✓ Invoices</p>
                            <p class="py-2">✓ Receipt Storage</p>
                            <p class="pt-2">✓ Financial Reports</p>
                        {% endblock %}
                    </div>
                </div>
            </div>
            <div class="pt-12 pb-8 px-10">
                {#                {% component "messages_list" %}#}
                {% include "core/base/toasts.html" %}
                <h2 class="text-2xl font-semibold mb-2 text-center">
                    {% block title %}
                    {% endblock title %}
                </h2>
                {% block content %}
                {% endblock content %}
            </div>
        </div>
    </div>
</div>
</body>
</html>
