{{template "base/head" .}}
{{template "base/navbar" .}}
<div id="body" class="container" data-page="user">
    {{template "user/setting_nav" .}}
    <div id="repo-setting-container" class="col-md-10">
        {{template "base/alert" .}}
        <div class="panel panel-default">
            <div class="panel-heading">
                SSH Keys
            </div>

            <div class="panel-body">
                <div id="ssh-keys">
                    <ul id="ssh-keys-list" class="list-group">
                        <li class="list-group-item"><span class="name">SSH Key's name</span></li>
                        {{range .Keys}}
                        <li class="list-group-item">
                            <span class="name">{{.Name}}</span>
                            <span class="print">({{.Fingerprint}})</span>
                            <button href="#" class="btn btn-danger delete pull-right" rel="{{.Id}}" data-del="{{.Id}}">Delete</button>
                        </li>
                        {{end}}
                        <li class="list-group-item">
                            <a class="btn btn-link btn-primary" href="#ssh-add-modal" id="ssh-add" data-toggle="modal">Add SSH Key</a>
                        </li>
                    </ul>
                    <div class="modal fade" id="ssh-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <form class="modal-content form-horizontal" id="ssh-form" method="post" action="/user/settings/ssh/">
                                {{.CsrfTokenHtml}}
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Add SSH Key</h4>
                                </div>

                                <div class="modal-body">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Key Name<strong class="text-danger">*</strong></label>
                                        <div class="col-md-8">
                                            <input name="keyname" class="form-control" placeholder="Type your preferred name" required="required">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">SSH Key<strong class="text-danger">*</strong></label>
                                        <div class="col-md-8">
                                            <textarea name="key_content" class="form-control" placeholder="Type your key content" required="required"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Save SSH Key</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <p><strong>Need help?</strong> Check out the guide to <a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">generating SSH keys</a> or troubleshoot <a href="https://help.github.com/ssh-issues/" target="_blank">common SSH Problems</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}