{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}

<!-- Adicionar o CSS mobile se não estiver em arquivo separado -->
<link rel="stylesheet" type="text/css" href="{% static 'enap_designsystem/blocks/cards.css' %}">

<div class="{{ value.type }} enap-card-wrapper">
    {% if value.type == 'card-info-white' or value.type == 'card-info-dark' %}
        <!-- Cards Informativos -->
        <div class="card-info-container">
            <!-- Link overlay para o primeiro botão -->
            {% if value.links %}
                {% for link_block in value.links %}
                    {% if forloop.first and link_block.block_type == 'button' %}
                        {% with button_value=link_block.value %}
                            {% if button_value.link_url %}
                                <a href="{{ button_value.link_url }}" class="card-overlay-link" 
                                   {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                            {% elif button_value.link_page %}
                                <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                            {% endif %}
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            
            <div class="card-info-icon-container">
                {% if value.image %}
                    {% image value.image fill-120x120 format-webp preserve-svg as card_img %}
                    <div class="card-info-icon" style="background-image: url('{{ card_img.url }}');"></div>
                {% elif value.icone %}
                    <i class="card-info-icone {{ value.icone }}"></i>
                {% endif %}
            </div>

            <div class="card-info-content">
                <div>
                {% if value.title %}
                    <h3 class="card-info-title">{{ value.title }}</h3>
                {% endif %}

                {% if value.description %}
                    <div class="card-info-description-info">{{ value.description|richtext }}</div>
                {% endif %}
                </div>

                {% if value.links %}
                    <div class="card-info-buttons">
                        {% for link_block in value.links %}
                            {% if link_block.block_type == 'button' %}
                                {% include_block link_block %}
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    {% elif value.type == 'card-bgimage' %}
        {% if value.image %}
            {% image value.image original format-webp as card_bg_img %}
            <div class="card-bgimage" style="background-image: url('{{ card_bg_img.url }}');">
        {% elif value.icone %}
            <i class="card-icone {{ value.icone }}"></i>
                <!-- Link overlay para o primeiro botão -->
                {% if value.links %}
                    {% for link_block in value.links %}
                        {% if forloop.first and link_block.block_type == 'button' %}
                            {% with button_value=link_block.value %}
                                {% if button_value.link_url %}
                                    <a href="{{ button_value.link_url }}" class="card-overlay-link" 
                                        {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                                {% elif button_value.link_page %}
                                    <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                                {% endif %}
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
                
                <div class="wrapper-text-card-bgimage">
                    {% if value.title %}
                    <h2 class="h2-card" style="
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 10px;
                  ">
                    {{ value.title }}
                  </h2>
                    {% endif %}

                    {% if value.description %}
                        <div class="p-card">{{ value.description|richtext }}</div>
                    {% endif %}

                    {% if value.links %}
                        <div class="wrapper-button-right">
                            <div class="card-buttons">
                                {% for link_block in value.links %}
                                    {% if link_block.block_type == 'button' %}
                                        {% include_block link_block %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% elif value.type == 'card-horizontal' %}
        <div class="card-horizontal-container">
            <!-- Link overlay para o primeiro botão -->
            {% if value.links %}
                {% for link_block in value.links %}
                    {% if forloop.first and link_block.block_type == 'button' %}
                        {% with button_value=link_block.value %}
                            {% if button_value.link_url %}
                                <a href="{{ button_value.link_url }}" class="card-overlay-link" 
                                    {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                            {% elif button_value.link_page %}
                                <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                            {% endif %}
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            
            <div class="card-horizontal-image-container">
                {% if value.image %}
                    {% image value.image original format-webp preserve-svg as card_img %}
                    <div class="img-card_cards" style="background-image: url('{{ card_img.url }}');"></div>
                {% elif value.icone %}
                    <i class="card-icone {{ value.icone }}"></i>
                {% endif %}
            </div>

            <div class="wrapper-text-card-horizontal">
                <div class="card-content-wrapper">
                    {% if value.title %}
                        <h2 class="h2-card">{{ value.title }}</h2>
                    {% endif %}

                    {% if value.description %}
                        <div class="p-card">{{ value.description|richtext }}</div>
                    {% endif %}
                </div>
                {% if value.links %}
                    <div class="wrapper-button-left">
                        <div class="card-buttons">
                            {% for link_block in value.links %}
                                {% if link_block.block_type == 'button' %}
                                    {% include_block link_block %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% elif value.type == 'card-horizontal-reverse' %}
        <div class="card-horizontal-reverse-container">
            <!-- Link overlay para o primeiro botão -->
            {% if value.links %}
                {% for link_block in value.links %}
                    {% if forloop.first and link_block.block_type == 'button' %}
                        {% with button_value=link_block.value %}
                            {% if button_value.link_url %}
                                <a href="{{ button_value.link_url }}" class="card-overlay-link" 
                                   {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                            {% elif button_value.link_page %}
                                <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                            {% endif %}
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            
            <div class="wrapper-text-card-horizontal-reverse">
                <div class="card-content-wrapper">
                    {% if value.title %}
                        <h2 class="h2-card">{{ value.title }}</h2>
                    {% endif %}

                    {% if value.description %}
                        <div class="p-card">{{ value.description|richtext }}</div>
                    {% endif %}
                </div>

                {% if value.links %}
                    <div class="wrapper-button-left">
                        <div class="card-buttons">
                            {% for link_block in value.links %}
                                {% if link_block.block_type == 'button' %}
                                    {% include_block link_block %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="card-horizontal-reverse-image-container">
                {% if value.image %}
                    {% image value.image fill-800x450 format-webp preserve-svg as card_img %}
                    <div class="img-card_cards" style="background-image: url('{{ card_img.url }}');"></div>
                {% elif value.icone %}
                    <i class="card-icone {{ value.icone }}"></i>
                {% endif %}
            </div>
        </div>
    {% else %}
        {% if value.image %}
            {% image value.image fill-800x450 format-webp preserve-svg as card_img %}
            <div class="img-card" style="background-image: url('{{ card_img.url }}');"></div>
        {% elif value.icone %}
            <i class="card-icone {{ value.icone }}"></i>
        {% endif %}

        <div class="wrapper-text-button_card-terciary">
            <!-- Link overlay para o primeiro botão -->
            {% if value.links %}
                {% for link_block in value.links %}
                    {% if forloop.first and link_block.block_type == 'button' %}
                        {% with button_value=link_block.value %}
                            {% if button_value.link_url %}
                                <a href="{{ button_value.link_url }}" class="card-overlay-link" 
                                   {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                            {% elif button_value.link_page %}
                                <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                            {% endif %}
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            
            <div class="wrapper-text-card">
                {% if value.title %}
                    <h2 class="h2-card{% if value.type == 'card-secondary' %}text-center{% endif %}{% if value.type == 'card-secondary' or value.type == 'card-terciary' %}white{% endif %}">{{ value.title }}</h2>
                {% endif %}

                {% if value.description %}
                    <div class="p-card{% if value.type == 'card-secondary' %}text-center{% endif %}{% if value.type == 'card-secondary' or value.type == 'card-terciary' %}white{% endif %}">{{ value.description|richtext }}</div>
                {% endif %}
            </div>

            {% if value.links %}
                {% if value.type == 'card-secondary' %}
                    <div class="wrapper-button-center">
                        <div class="card-buttons">
                            {% for link_block in value.links %}
                                {% if link_block.block_type == 'button' %}
                                    {% include_block link_block %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% elif value.type == 'card-terciary' %}
                    <div class="wrapper-button-right">
                        <div class="card-buttons">
                            {% for link_block in value.links %}
                                {% if link_block.block_type == 'button' %}
                                    {% include_block link_block %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% else %}
                    <div class="wrapper-button-left">
                        <div class="card-buttons">
                            {% for link_block in value.links %}
                                {% if link_block.block_type == 'button' %}
                                    {% include_block link_block %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
</div>

<style>
.card-info-white {
    border-left: 2px solid #024248;
}
/* Cards Informativos */
.card-info-white .card-info-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 24px;
    background-color: transparent;
    position: relative;
    flex-direction: column;
    height: 100%;
    padding-top: 24px;
}

.card-info-dark .card-info-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-left: 4px solid #AFF0ED;
    background-color: #024248;
    position: relative;
    flex-direction: column;
    height: 100%;
}

.card-info-icon-container {
    flex-shrink: 0;
}

.card-info-icone {
    font-size: 56px;
}

.card-info-icone-dow {
    font-size: 2rem; color: #024248;
}


.card-info-white .card-info-icone {
    color: #024248;
}

.card-info-dark .card-info-icone {
    color: #AFF0ED;
}

.card-info-icon {
    width: 56px;
    height: 56px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    justify-content: space-between;
}

.card-info-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

card-info-title-dow{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    color: #024248;
    margin: 20px 0;
}

.card-info-title h3 {
    font-size: 24px;
}

.card-info-white .card-info-title {
    color: #1F2933;
    font-size: 24px;
}

.card-info-dark .card-info-title {
    color: #FFFFFF;
    font-size: 24px;
}

.card-info-description-info p{
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    color: #434A54;
}

b, strong {
    font-weight: 700;
}

.card-info-white .card-info-description-info,
.card-info-white .card-info-description-info p {
    color: #3E4C59;
}

.card-info-dark .card-info-description-info,
.card-info-dark .card-info-description-info p {
    color: #E4E7EB;
}

.card-info-buttons {
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .card-info-white .card-info-container,
    .card-info-dark .card-info-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .card-info-title {
        font-size: 18px;
    }
    
    .card-info-description-info {
        font-size: 14px;
        max-width: 80vw;
    }
}

.card-icone{
    text-align: center;
    font-size: 72px;
    padding: 15px 0;
    {% if value.cor_texto_hex %}
    color: {{value.cor_texto_hex}};
    {% elif value.cor_texto %}
    color: {{value.cor_texto}};
    {% endif %}
}

.h2-card {
    font-size: 20px;
    font-weight: 600;
}

.h2-card, .p-card p{
    {% if value.cor_texto_hex %}
    color: {{value.cor_texto_hex}};
    {% elif value.cor_texto %}
    color: {{value.cor_texto}};
    {% endif %}
    text-align: {{ value.text_align }};
}
</style>