{% extends 'base.html' %}

{% block title %}{{ page_title|default:"External Service" }} - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<style>
.landing-page {
    min-height: 80vh;
    padding: 2rem 0;
}

.landing-header {
    text-align: center;
    margin-bottom: 3rem;
}

.landing-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.landing-description {
    font-size: 1.25rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

.external-service-embed {
    width: 100%;
    min-height: 600px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.external-service-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}
</style>
{% endblock %}

{% block content %}
<div class="landing-page">
    <div class="container">
        <div class="landing-header">
            <h1 class="landing-title">{{ page_title|default:"External Service" }}</h1>
            {% if page_description %}
            <p class="landing-description">{{ page_description }}</p>
            {% endif %}
        </div>
        
        <div class="external-service-embed">
            <iframe 
                src="{{ external_url }}"
                frameborder="0"
                scrolling="auto"
                title="{{ page_title|default:'External Service' }}">
            </iframe>
        </div>
    </div>
</div>
{% endblock %}