{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block styles %}
    {{ super() }}
    <link href="{{ url_for('static', filename='styles/wizard.css') }}" rel="stylesheet">
{% endblock %}

{% block scripts %}
    {{super()}}
    <script src="{{ url_for('static', filename='lib/plotly.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="{{ url_for('static', filename='wizard.js') }}"></script>
{% endblock %}

{% block station_state %}
    <h3 id='station-state' style="display: inline"> - Uninitialized - </h3>
{% endblock %}

{% block init %}
{% endblock %}

{% block content %}
<div class="columns_section">
    <h3>Script Wizard</h3>
</div>

<div id="init_feedback" class="columns_section" hidden="true">
    <h4>Page unavailable: System not initialized.</h4>
</div>

<div id="page_content" hidden="true">

    <br>
    <div class="controls">
        <button onclick="addTest()">Add New Test</button>
        <button onclick="previewJSON()">Preview JSON</button>
        <button onclick="downloadJSON()">Download JSON</button>
        <!-- <button onclick="loadFromFile()">Load from File</button>
        <input type="file" id="fileInput" accept=".json" style="display: none;" onchange="handleFileLoad(event)"> -->
    </div>
    
    <div id="testsContainer"></div>
    
    <div id="jsonPreview" class="json-preview">
        <h3>JSON Preview</h3>
        <pre id="jsonContent"></pre>
        <button onclick="hidePreview()">Close Preview</button>
    </div>
        
</div>
{% endblock %}