{% extends "base.html" %}

{% block title %}{{ filename }} - markMyWords{% endblock %}

{% block extra_head %}
<style>
    .protection-badge {
        display: inline-block;
        background-color: #fff3cd;
        border: 1px solid #ffc107;
        color: #856404;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        margin-left: 10px;
    }
    
    .protection-badge::before {
        content: "🔒 ";
    }
    
    .admin-controls {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
        display: none;
    }
    
    .admin-controls.visible {
        display: block;
    }
    
    .admin-button {
        padding: 6px 12px;
        margin-right: 10px;
        border: 1px solid #ddd;
        background-color: #f5f5f5;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background-color 0.2s;
    }
    
    .admin-button:hover {
        background-color: #e0e0e0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="breadcrumb">
        <a href="/">Home</a> > 
        <span class="breadcrumb-repo">{{ repo }}</span> >
        <span class="breadcrumb-file">{{ filename }}</span>
        {% if is_protected %}<span class="protection-badge" title="This document is password protected"></span>{% endif %}
    </div>

    <article class="markdown-content">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <h1>{{ filename }}</h1>
        </div>
        <div class="content-body">
            {{ content|safe }}
        </div>
    </article>
</div>

<script>
    // Check if admin controls should be shown via query parameter
    const params = new URLSearchParams(window.location.search);
    if (params.has('admin')) {
        document.querySelector('.admin-controls').classList.add('visible');
    }
</script>
{% endblock %}