{% extends 'base.html' %}

{% block title %}View Source - {{ filename }}{% endblock %}

{% block head %}
<!-- CodeMirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css">
<link rel="stylesheet"
    href="{{ url_for('static', filename='css/modules/source_viewer.css') }}?v={{ range(1, 10000) | random }}">
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ filename }}</li>
    </ol>
</nav>

<div class="source-viewer-container">
    <div class="source-header">
        <div class="file-info">
            <i class="bi bi-file-earmark-code"></i>
            <span class="file-path" title="{{ filepath }}">{{ filepath }}</span>
            <span class="file-type">{{ file_type }}</span>
            <span class="unsaved-badge" id="unsavedBadge">Unsaved</span>
        </div>
        <div class="source-actions">
            <button class="btn btn-edit" id="editBtn" onclick="toggleEdit()">
                <i class="bi bi-pencil me-1"></i>Edit
            </button>
            <button class="btn btn-save" id="saveBtn" onclick="saveFile()" disabled>
                <i class="bi bi-save me-1"></i>Save
            </button>
        </div>
    </div>

    <div class="editor-wrapper">
        <textarea id="sourceCode">{{ content }}</textarea>
    </div>
</div>

<div class="save-status" id="saveStatus"></div>
{% endblock %}

{% block scripts %}
<!-- CodeMirror JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<!-- Language modes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/vhdl/vhdl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js"></script>
<!-- Addons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/selection/active-line.min.js"></script>

<script src="{{ url_for('static', filename='js/modules/source_viewer.js') }}"></script>
{% endblock %}