{% extends "base.html" %}
{% block content %}
<section class="section">
    <div class="container export__desc">
        <h1 class="title">Congratulations!</h1>
        <h2 class="subtitle">
            Export your ReadAlong to your own website</h2>
    </div>
    <div class="container code m-t-50">
        <h1 class='title'>Code</h1>
        <p>Here's a snippet of code to embed in your site!</p>
        <code>
            &lt;script type="module" src='https://unpkg.com/@roedoejet/readalong/dist/read-along/read-along.esm.js'&gt;&lt;/script&gt;
            &lt;script nomodule src='https://unpkg.com/@roedoejet/readalong/dist/read-along/read-along.js'&gt;&lt;/script&gt;
            &lt;read-along text="aligned.xml" alignment="aligned.smil" audio="aligned{{data.audio_ext}}"&gt;&lt;/read-along&gt;
        </code>
    </div>
    <div class="container readalong">
        <h1 class='title'>ReadAlong</h1>
        <p>Here's your interactive read along!</p>
        <read-along text='{{data.text_fn}}' alignment='{{data.smil_fn}}' audio='{{data.audio_fn}}'></read-along>
        {# <read-along text="/file/aligned.xml" alignment="/file/aligned.smil" audio="/file/aligned{{data.audio_ext}}"></read-along> #}
    </div>
    <div class="columns is-mobile is-centered download">
        <div class="column is-half is-centered has-text-centered">
            <a class="button is-medium" href='/download/{{data.base}}'>Download Files</a>
        </div>
    </div>
    {% if 'log' in data %}
    <div class="container log">
        <h1 class='title'>Log</h1>
        <p>Here's a log for debugging.</p>
        <p>{{data.log}}</p>
    </div>
    {% endif %}
</section>
{% endblock %}
