{% extends "base.html" %}
{% block content %}
<style>
    /* Global Background & Layout */
    body {
        width: 100%;
        background-size: 300% 300%;
        background-image: linear-gradient(
                -45deg,
                rgba(59, 173, 227, 1) 0%,
                rgba(87, 111, 230, 1) 25%,
                rgba(152, 68, 183, 1) 51%,
                rgba(255, 53, 127, 1) 100%
        );
        animation: AnimateBG 20s ease infinite;
        color: white;
    }

    @keyframes AnimateBG {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }

    /* Glassmorphism Container for Manual */
    #manual_container {
        background: rgba(30, 41, 59, 0.5); /* Semi-transparent dark blue */
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
        padding: 40px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        color: #f1f5f9; /* Slate 100 text */
        margin-top: 20px;
        margin-bottom: 40px;
    }

    /* Markdown Styling Override */
    #text_div h1, #text_div h2, #text_div h3 {
        color: #fff;
        margin-top: 1.5em;
        margin-bottom: 0.8em;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    #text_div h1 { font-size: 2.2em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 0.3em; }
    #text_div h2 { font-size: 1.8em; }
    
    #text_div p, #text_div li {
        font-size: 1.1em;
        line-height: 1.7;
        color: #cbd5e1; /* Slate 300 */
    }

    #text_div a {
        color: #60a5fa;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    #text_div a:hover {
        color: #93c5fd;
        text-decoration: underline;
    }
    
    /* Code Blocks */
    #text_div pre {
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 20px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    }
    
    #text_div code {
        font-family: 'Consolas', 'Monaco', monospace;
        color: #e2e8f0;
    }
    
    /* Tables */
    #text_div table {
        color: #e2e8f0;
        border-color: rgba(255,255,255,0.1);
        width: 100%;
        margin-bottom: 1rem;
    }
    
    #text_div table th, #text_div table td {
        border: 1px solid rgba(255,255,255,0.1);
        padding: 0.75rem;
    }
    
    #text_div table thead th {
        border-bottom: 2px solid rgba(255,255,255,0.2);
        background: rgba(255, 255, 255, 0.05);
    }
    
</style>

<div class="container-fluid">
    <div id="manual_container">
        <meta id="text" data-text="{{data}}">
        <div id="text_div"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autorun=true&amp;lang=css&lang=python&skin=sunburst"></script>
<script src="{{ url_for('static', filename='js/showdown_2.1.0.js') }}"></script>
<script src="{{ url_for('static', filename='js/showdown-prettify.js') }}"></script>
<link href="{{ url_for('static', filename='css/showdown.css') }}" rel="stylesheet">


<script type="text/javascript">
  $(document).ready(function(){
    // Force fluid layout
    $("#main_container").removeClass("container").addClass("container-fluid");
    
    var converter = new showdown.Converter({extensions: ['prettify']});
    converter.setOption('tables', true);
    converter.setOption('strikethrough', true);
    converter.setOption('ghCodeBlocks',true);
    
    text = $('#text').data('text');
    if (window.location.href.endsWith('.yaml')) {
      text = "```" + text + "```";
    }
    html      = converter.makeHtml(text);
    $('#text_div').html(html);
  });
</script>    
{% endblock %}
