{% 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 -->
    {% if image %}
        {% static image as final_image_path %}
    {% else %}
        {% static 'images/no_content/no_item.jpg' as final_image_path %}
    {% endif %}
    <p class="sm">
        <img src="{{ final_image_path }}"
             alt="No-empty-state-image"
             class="empty-state-image">
        <p>
            <!-- 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>