{%- extends 'lab/index.html.j2' -%}

{# Custom CSS for tutorial styling #}
{% block header %}
{{ super() }}
<style>
/* Tutorial-specific styles */
.jp-CodeCell {
    margin: 1em 0;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
}
/* Collapsible code input */
.tutorial-code-input {
    border-bottom: 1px solid #e1e4e8;
}
.tutorial-code-input summary {
    padding: 8px 15px;
    background: #f6f8fa;
    cursor: pointer;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
    color: #586069;
    user-select: none;
    list-style: none;
}
.tutorial-code-input summary::-webkit-details-marker {
    display: none;
}
.tutorial-code-input summary::before {
    content: '▶ ';
    color: #0366d6;
    font-size: 0.8em;
}
.tutorial-code-input[open] summary::before {
    content: '▼ ';
}
.tutorial-code-input summary:hover {
    background: #ebeef1;
}
.tutorial-code-input .jp-InputArea {
    margin: 0;
    border: none;
    border-top: 1px solid #e1e4e8;
}
.tutorial-code-input .jp-Cell-inputWrapper {
    padding: 0;
}
/* Output styling - always visible */
.jp-Cell-outputWrapper {
    padding: 0;
}
.jp-OutputArea {
    padding: 10px 15px;
    background: white;
}
.jp-OutputArea-child {
    margin: 5px 0;
}
/* Markdown styling improvements */
.jp-RenderedMarkdown {
    padding: 15px 20px;
}
.jp-RenderedMarkdown h1, .jp-RenderedMarkdown h2, .jp-RenderedMarkdown h3 {
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
}
/* Table styling */
.jp-RenderedHTMLCommon table {
    border-collapse: collapse;
    margin: 1em 0;
}
.jp-RenderedHTMLCommon th, .jp-RenderedHTMLCommon td {
    border: 1px solid #dfe2e5;
    padding: 8px 12px;
}
.jp-RenderedHTMLCommon th {
    background: #f6f8fa;
}
/* Image/chart styling */
.jp-RenderedImage img, .jp-RenderedSVG svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}
/* DataFrame output styling */
.dataframe {
    font-size: 0.9em;
}
/* Hide cell numbers */
.jp-InputPrompt, .jp-OutputPrompt {
    display: none !important;
}
/* Stream output (print statements) */
.jp-OutputArea-output pre {
    margin: 0;
    padding: 8px 0;
    white-space: pre-wrap;
    font-size: 0.9em;
}
/* Expand/Collapse All buttons */
.code-toggle-controls {
    text-align: right;
    margin-bottom: 20px;
    padding: 10px 0;
}
.code-toggle-controls button {
    background: #0366d6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 0.9em;
}
.code-toggle-controls button:hover {
    background: #0256b9;
}
/* Print styles */
@media print {
    .jp-CodeCell {
        break-inside: avoid;
    }
    .code-toggle-controls {
        display: none;
    }
    .tutorial-code-input summary {
        display: none;
    }
    .tutorial-code-input .jp-InputArea {
        border-top: none;
    }
}
</style>
{% endblock header %}

{# Override input block to wrap only code in collapsible details #}
{% block input %}
<details class="tutorial-code-input">
<summary>Show/Hide Code</summary>
{{ super() }}
</details>
{% endblock input %}

{# Add toggle controls at the end #}
{% block footer_js %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add toggle controls if there are code cells
    const codeInputs = document.querySelectorAll('.tutorial-code-input');
    if (codeInputs.length > 0) {
        const controls = document.createElement('div');
        controls.className = 'code-toggle-controls';
        controls.innerHTML = `
            <button onclick="toggleAllCode(true)">Show All Code</button>
            <button onclick="toggleAllCode(false)">Hide All Code</button>
        `;
        const firstCell = document.querySelector('.jp-Cell');
        if (firstCell) {
            firstCell.parentNode.insertBefore(controls, firstCell);
        }
    }
});

function toggleAllCode(expand) {
    document.querySelectorAll('.tutorial-code-input').forEach(function(details) {
        details.open = expand;
    });
}
</script>
{% endblock footer_js %}
