{% load static %}


<style>
   
    .empty-state-container {
        background-color: #ffffff;
        padding: 40px;
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow */
        text-align: center;
        max-width: 80rem; /* Max width for content - made wider */
        width: 90%; /* Fluid width */
        margin: 10px auto; /* Added margin-top and auto for horizontal centering */
        max-height: auto; /* 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;
        margin-bottom: 10px;
        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">No {{ value|capfirst }} Yet</h3>

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

    <!-- Call to Action Button -->
    <a class="btn btn-lg btn-primary" href="{{ url }}">Create New {{ value|capfirst }} </a>
</div>