{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}

{% block content %}
    {# Header Section #}
    {% if page.header_type != 'none' %}
        {% if page.header_type == 'text_image' %}
            <header class="header-text-image py-5">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-{% if page.header_image %}8{% else %}12{% endif %}">
                            {% if page.header_title %}
                                <h1>{{ page.header_title }}</h1>
                            {% endif %}
                            {% if page.header_text %}
                                {{ page.header_text|richtext }}
                            {% endif %}
                        </div>
                        {% if page.header_image %}
                            <div class="col-md-4">
                                {% image page.header_image width-600 class="img-fluid" %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </header>
        {% elif page.header_type == 'hero' %}
            <header class="header-hero position-relative">
                {% if page.header_image %}
                    {% image page.header_image fill-2000x600 class="w-100" style="height: 60vh; object-fit: cover;" %}
                {% endif %}
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8">
                                {% if page.header_title %}
                                    <h1 class="text-white">{{ page.header_title }}</h1>
                                {% endif %}
                                {% if page.header_text %}
                                    <div class="text-white">
                                        {{ page.header_text|richtext }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        {% elif page.header_type == 'html' %}
            <header class="header-html">
                {{ page.header_html|safe }}
            </header>
        {% endif %}
    {% endif %}

    {# Content Sections #}
    {% for block in page.sections %}
        {% include_block block %}
    {% endfor %}
{% endblock %}

{% block extra_css %}
<style>
    .header-hero {
        position: relative;
        margin-bottom: 2rem;
    }
    
    .header-hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
    }
    
    .header-hero .container {
        position: relative;
        z-index: 1;
    }
    
    .header-text-image {
        margin-bottom: 2rem;
    }
    
    .vink-bg-blank {
        background-color: #ffffff;
    }
    
    .vink-bg-light {
        background-color: #f8f9fa;
    }
    
    .vink-bg-dark {
        background-color: #212529;
        color: #ffffff;
    }
</style>
{% endblock %}