{% extends "base.html" %}

{% block content %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">

<div id="chal-solves-window" class="reveal-modal" data-reveal>
    <h3>Solved By</h3>
    <table>
        <thead>
            <tr>
                <td><b>Name</b>
                </td>
                <td><b>Date</b>
                </td>
            </tr>
        </thead>
        <tbody id="chal-solves-names">
        </tbody>
    </table>
    <a class="close-reveal-modal" data-reveal-id="chal-window">&#215;</a>
</div>

<div id="chal-window" class="reveal-modal" data-reveal>
    <div class="row">
        <h3 class='chal-name'></h3>
        <h4 class="chal-value"></h4>
        <p><i><a data-reveal-id="chal-solves-window" class="chal-solves"></a></i></p>
        <p class="chal-desc"></p>

        <input id="answer" type="text" placeholder="Key">
        <input type="hidden" id="nonce" name="nonce" value={{ nonce }}>
        <button id="submit-key">Submit</button>
        <input id="chal-id" type="hidden">
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

    <div class="row">
        <h2 class="text-center">Challenges</h2>

        <div class="large-12 columns">
            <table id='challenges'>
            </table>
        </div>
        <div id="solves-graph" style="width: 90%; height: 400px; margin: 0 auto"></div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.js"></script>
    <script src="/static/js/chalboard.js"></script>
{% endblock %}