<div id="api_key_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
  aria-labelledby="api_key_modal_label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}">
            <span aria-hidden="true">&times;</span>
        </button>
        <h3 class="inline-block" id="api_key_modal_label">{{t "Show API key" }}</h3>
        <span class="alert-notification" id="api_key_status"></span>
    </div>
    <div class="modal-body">
        <div id="password_confirmation">
            <form id="api_key_form">
                <p>{{t "Please re-enter your password to confirm your identity." }}
                    <a href="/accounts/password/reset/" target="_blank">{{t "Never had one? Forgotten it?" }}</a></p>
                <div class="control-group">
                    <label for="password" class="control-label">{{t "Current password" }}</label>
                    <input type="password" autocomplete="off" name="password" id="get_api_key_password" value="" />
                </div>
                <button type="submit" name="view_api_key" id="get_api_key_button" class="button sea-green">
                    {{t 'Get API key' }}
                </button>
            </form>
        </div>
        <div id="show_api_key">
            <p>{{t "Your API key:" }}</p>
            <p><b><span id="api_key_value"></span></b></p>
            <div id="api_key_buttons">
                <button type="submit" class="button white rounded regenerate_api_key">
                    {{t "Generate new API key" }}
                </button>
                <a id="download_zuliprc" download="{{zuliprc}}" class="button sea-green">
                    {{t "Download .zuliprc" }}
                </a>
            </div>
            <div id="user_api_key_error" class="text-error"></div>
        </div>
    </div>
</div>
