<div class="micromodal" id="api_key_modal" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="api_key_modal_label">
            <header class="modal__header">
                <h1 class="modal__title" id="api_key_modal_label">
                    {{t "Show API key" }}
                </h1>
                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
            </header>
            <main class="modal__content">
                <div id="password_confirmation">
                    <span class="alert-notification" id="api_key_status"></span>
                    <div id="api_key_form">
                        <p>{{t "Please re-enter your password to confirm your identity." }}
                            <a href="/accounts/password/reset/" target="_blank" rel="noopener noreferrer">
                                {{t "Never had one? Forgotten it?" }}
                            </a>
                        </p>
                        <div class="password-div">
                            <label for="password" class="control-label">{{t "Current password" }}</label>
                            <input type="password" autocomplete="off" name="password" id="get_api_key_password" value="" />
                            <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
                        </div>
                    </div>
                </div>
                <div id="show_api_key">
                    <p>{{t "Your API key:" }}</p>
                    <p><b><span id="api_key_value"></span></b></p>
                    <div id="user_api_key_error" class="text-error"></div>
                </div>
            </main>
            <footer class="modal__footer">
                <button type="submit" name="view_api_key" id="get_api_key_button" class="modal__btn dialog_submit_button">
                    {{t 'Get API key' }}
                </button>
                <div id="api_key_buttons">
                    <button class="modal__btn dialog_submit_button" id="regenerate_api_key" aria-label="{{t 'Generate new API key' }}">{{t "Generate new API key" }}</button>
                    <a class="modal__btn dialog_submit_button" id="download_zuliprc" download="{{zuliprc}}" tabindex="0">{{t "Download .zuliprc" }}</a>
                </div>
            </footer>
        </div>
    </div>
</div>
