{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/utils.html" as utils %}

{%- extends "base.html" %}


{% block content %}
   <div class="container">
   <div class="col-md-12">

    {% if result_url %}
<script type=text/javascript>
    $(function() {
        $('a#fetch_data').bind('click', function() {
            $.getJSON('{{ result_url }}', function(data) {
                $("#result").text(data.result);
            });
            return false;
        });
    });
</script>

    <p class="text-center"><a class="btn btn-primary" href="#" role="button" id="fetch_data">Click to show the secret</a></p>
    <p class="h4 text-center mb-4">Remember, this is the last time you see it.</p>
    <br>
<pre>
<span id=result></span>
</pre>
    {% endif %}

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class=flashes>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}

    {% if form %}
    <section class="form-elegant">
    <form method="POST" action="{{ url_for('frontend.add_entry') }}">
        {{ form.csrf_token }}

        <p class="h4 text-center mb-4">Put here the secret you want to share.</p>
        <p class="h4 text-center mb-4">It will be available for the next 24h.</p>
        <p class="h4 text-center mb-4">After the first reading, it will self-destruct.</p>
        <br><br>
        <textarea type="text" id="defaultFormContactMessageEx" class="form-control" rows="6" name="secrets"></textarea>
        <br><br>
        <div class="text-center mb-3">
            <button type="submit" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Save my secret</button>
        </div>
    </form>
    </section>
    {% endif %}

  </div>
  </div>
{%- endblock %}