{% extends "base_bootstrap.html.twig" %}

{% block head %}
    {{ parent() }}

    <script src="/js/forge.min.js"></script>
    <script src="/js/jszip.min.js"></script>
    <script src="/js/FileSaver.min.js"></script>
    <script src="/js/new_certificate.js"></script>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="row">
                    <h2>New Certificate for "<span class="user">{{ user.getUsername() }}</span>"</h2>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="name">Name</label>
                        <div class="col-md-8">
                            <input name="name" id="name" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">Private Key password</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <input id="wantsPassword" type="checkbox" />
                                </div>
                                <input type="password" disabled class="form-control" id="password" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">Save private key online</label>
                        <div class="col-md-8">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="saveOnline" disabled /> This may be a security risk.
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <button type="button" class="magic-csr btn btn-primary pull-right">Create certificate</button>
                        </div>
                    </div>
                </div>
                <input type="hidden" value="{{ user.getUsername() }}" id="user-input">
            </div>
        </div>
    </div>
{% endblock %}