{% extends "base.html" %}

{% block title %}Код для встраивания - Python Web Компилятор{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">Код для встраивания блокнота</h2>
    <a href="{{ url_for('view_notebook', notebook_id=notebook.id) }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Назад к блокноту
    </a>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Используйте следующий HTML код для встраивания блокнота на ваш сайт:</h5>
        
        <div class="mb-3">
            <label for="embed-code" class="form-label">HTML код для встраивания:</label>
            <textarea id="embed-code" class="form-control" style="height: 150px; font-family: monospace;" readonly>
<iframe src="{{ url_for('embed_notebook', notebook_id=notebook.id, _external=True) }}" width="100%" height="460" frameborder="0"></iframe>
            </textarea>
        </div>
        
        <div class="d-flex gap-2">
            <button id="copy-button" class="btn btn-primary flex-fill">
                <i class="bi bi-clipboard me-1"></i>Копировать код
            </button>
            <a href="{{ url_for('view_notebook', notebook_id=notebook.id) }}" class="btn btn-outline-secondary flex-fill">
                <i class="bi bi-arrow-left me-1"></i>Вернуться к блокноту
            </a>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">Предварительный просмотр</h5>
    </div>
    <div class="card-body">
        <iframe src="{{ url_for('embed_notebook', notebook_id=notebook.id, _external=True) }}" width="100%" height="460" frameborder="0"></iframe>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('copy-button').addEventListener('click', function() {
        const embedCode = document.getElementById('embed-code');
        embedCode.select();
        document.execCommand('copy');
        
        // Show feedback
        const originalText = this.innerHTML;
        this.innerHTML = '<i class="bi bi-check-circle me-1"></i>Скопировано!';
        setTimeout(() => {
            this.innerHTML = originalText;
        }, 2000);
    });
</script>
{% endblock %}