{% load css_tags %}{% block_css 'enap_designsystem/blocks/feature_list_block.css' %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}

<div class="hero-feature-container">
    <!-- Featured item (left side) -->
    <div class="hero-feature-main">
        <div class="hero-main-card">
            {% if value.featured_link_url %}
                <a href="{{ value.featured_link_url }}" class="hero-main-link">
            {% endif %}
                <div class="hero-main-media">
                    {% if value.featured_image %}
                        {% image value.featured_image original format-webp class="hero-main-image" alt="{{ value.featured_title }}" %}
                    {% endif %}
                </div>
                <div class="hero-main-content">
                    <h2 class="hero-main-title">{{ value.featured_title }}</h2>
                    <div class="hero-main-description">
                        {{ value.featured_description|richtext }}
                    </div>
                </div>
            {% if value.featured_link_url %}
                </a>
            {% endif %}
        </div>
    </div>

    <!-- List items (right side) -->
    <div class="hero-feature-list">
        {% for item in value.list_items %}
            <div class="hero-list-item">
                {% if item.link_url %}
                    <a href="{{ item.link_url }}" class="hero-list-link">
                        <div class="hero-list-media">
                            {% if item.image %}
                                {% image item.image original format-webp class="hero-list-image" alt="{{ item.title }}" %}
                            {% endif %}
                        </div>
                        <div class="hero-list-content">
                            <h3 class="hero-list-title">{{ item.title }}</h3>
                            <div class="hero-list-description">
                                {{ item.description|richtext }}
                            </div>
                        </div>
                    </a>
                {% else %}
                    <div class="hero-list-media">
                        {% if item.image %}
                            {% image item.image fill-300x200 class="hero-list-image" alt="{{ item.title }}" %}
                        {% endif %}
                    </div>
                    <div class="hero-list-content">
                        <h3 class="hero-list-title">{{ item.title }}</h3>
                        <div class="hero-list-description">
                            {{ item.description|richtext }}
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
</div>

{% endblock %}