{% extends "base.html" %}

{% block title %}Noise Letter{% endblock %}

{% block css %}
<style>
    .noise-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 80vh;
        background-color: white;
        color: black;
        font-family: monospace;
        padding: 20px;
        margin-top: 20px;
    }

    #controls {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        width: 100%;
        max-width: 600px;
        justify-content: center;
    }

    #container {
        width: 100%;
        max-width: 1200px;
        height: 400px;
        border: 1px solid #ccc;
        background-color: white;
    }

    canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
</style>
{% endblock %}

{% block content %}
<div class="noise-wrapper rounded-lg">
    <div id="controls">
        <input type="text" id="textInput" maxlength="12" placeholder="ENTER TEXT (MAX 12)"
            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 placeholder-gray-400">
        <button id="renderBtn"
            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
            RENDER
        </button>
    </div>
    <div id="container">
        <canvas id="glcanvas"></canvas>
    </div>
    <p class="mt-4 text-gray-600 text-sm">Visualizing text as noise signal</p>
</div>
{% endblock %}

{% block js %}
<script src="{{ url_for('static', path='js/noise_letter.js') }}"></script>
{% endblock %}