{% extends "base.html" %}
{% block content %}
<section class="section">
    <div class="container preview__desc">
        <h1 class="title">Preview</h1>
        <h2 class="subtitle">
            Preview the data in your ReadAlong</h2>

    </div>
    <br>
    <hr>
    <div class='container configuration'>
        <h2>Set some configuration options</h2>
        <label class="checkbox">
            <input type="checkbox" onchange="updateConfig('--closed-captioning', this.checked)">
            Closed Captioning
        </label>
        <label class="checkbox">
            <input type="checkbox" onchange="updateConfig('--save-temps', this.checked)">
            Save Temporary Files
        </label>
        <label class="checkbox">
            <input value='t' type="checkbox" onchange="updateConfig('--text-grid', this.checked)">
            Save Text Grids
        </label>
        <label class="checkbox">
            <input value='t' type="checkbox" onchange="updateConfig('show-log', this.checked)">
            Show Log
        </label>
    </div>
    <br>
    <div class="columns is-mobile is-centered">
        <div class="column is-half is-centered has-text-centered">
            <a class="button is-medium" href="/step/3" onclick="spinner('stepTwoSpinner')">Go to the next step!</a>
        </div>
    </div>
    <div id="stepTwoSpinner" class="pageloader is-right-to-left"><span class="title">Please wait while the ReadAlong-Studio aligns your audio and text!</span></div>

</section>
{% endblock %}
