{% load static %}
{% load i18n %}

<style>

    .empty-state-container {
        background-color: #ffffff;
        padding: 50px;
        border-radius: 5px; /* Rounded corners */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtle shadow */
        text-align: center;
        max-width: 70rem; /* Max width for content - made wider */
        width: 90%; /* Fluid width */
        margin: 0px auto; /* Added margin-top and auto for horizontal centering */
        max-height: 80vh; /* Added min-height to control the height */
        display: flex; /* Use flexbox for vertical centering of content */
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
    }
    .empty-state-image {
        max-width: 50%; /* Responsive image size */
        height: auto%;

        border-radius: 10px; /* Rounded corners for image */
    }
    .empty-state-title {
        color: #343a40; /* Dark text for title */
        font-weight: 600;
        margin-bottom: 15px;
    }
    .empty-state-text {
        color: #6c757d; /* Muted text for description */
        margin-bottom: 30px;
        line-height: 1.6;
    }
    /* No specific styles for .btn-add-new or .message-box are needed here as per previous updates */
</style>

<div class="empty-state-container">
    <!-- Empty State Illustration -->
    <img src="{% static 'images/logos/no-content-new.jpg' %}" alt="No-empty-state-image" class="empty-state-image">

    <!-- Title -->
    <h3 class="empty-state-title">
        {% blocktrans %}No {{ value}} Yet{% endblocktrans %}
    </h3>

    <!-- Description -->
    <p class="empty-state-text">
        {% blocktrans %}It looks like you haven't added any {{ value }} to your account.
        Click the button below to get started and add your first {{ value }}!{% endblocktrans %}
    </p>

    <!-- Call to Action Button -->
    <a class="btn btn-lg btn-primary" href="{{ url }}">
        <i class="fa fa-plus me-2"></i>
         {% blocktrans %}Create New {{value}}{% endblocktrans %}
    </a>
</div>