{% extends "base.html" %}
{% load compress static hc_extras %}

{% block content %}

{{ registration_dict|json_script:"registration" }}
<div class="row">
<form
    id="add-credential-form"
    class="col-sm-6 col-sm-offset-3"
    data-options="{{ options }}"
    method="post"
    encrypt="multipart/form-data">
    <h1>Add Security Key</h1>

    {% csrf_token %}
    <input id="attestation_object" type="hidden" name="attestation_object">
    <input id="client_data_json" type="hidden" name="client_data_json">

    <div class="form-group">
        <label for="name">Name</label>
        <input
            type="text"
            class="form-control"
            id="name"
            name="name"
            required>
        <div class="help-block">
            Give this credential a descriptive name. Example: "My primary Yubikey"
        </div>
    </div>

    <div class="form-group text-right">
        <button
            id="name-next"
            class="btn btn-default" type="button">
            Confirm Name and Continue
        </button>
    </div>

    <div id="waiting" class="hide">
        <h2>Waiting for security key</h2>
        <p>
            Follow your browser's steps to register your security key
            with {% site_name %}.
        </p>

        <div class="spinner started">
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </div>
    </div>

    <div id="error" class="alert alert-danger hide">
        <p>
            <strong>Something went wrong.</strong>
        </p>
        <p id="error-text"></p>

        <div class="text-right">
            <button id="retry" type="button" class="btn btn-danger">
                Try Again
            </button>
        </div>
    </div>

    <div id="success" class="hide">
        <div class="alert alert-success">
            <strong>Success!</strong>
            Credential acquired.
        </div>

        <div class="form-group text-right">
            <input
                id="add-credential-submit"
                class="btn btn-primary"
                type="submit"
                name=""
                value="Save Security Key">
        </div>
    </div>
</form>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/cbor.js' %}"></script>
<script src="{% static 'js/add_credential.js' %}"></script>
{% endcompress %}
{% endblock %}