define([
        'backbone',
        'jquery',
        'underscore',
        'js/programs/utils/constants',
        'text!templates/programs/confirm_modal.underscore',
        'edx-ui-toolkit/js/utils/html-utils',
        'gettext'
    ],
    function( Backbone, $, _, constants, ModalTpl, HtmlUtils ) {
        'use strict';

        return Backbone.View.extend({
            events: {
                'click .js-cancel': 'destroy',
                'click .js-confirm': 'confirm',
                'keydown': 'handleKeydown'
            },

            tpl: HtmlUtils.template( ModalTpl ),

            initialize: function( options ) {
                this.$parentEl = $( options.parentEl );
                this.callback = options.callback;
                this.content = options.content;
                this.render();
            },

            render: function() {
                HtmlUtils.setHtml(this.$el, this.tpl( this.content ));
                HtmlUtils.setHtml(this.$parentEl, HtmlUtils.HTML(this.$el));
                this.postRender();
            },

            postRender: function() {
                this.$el.find('.js-focus-first').focus();
            },

            confirm: function() {
                this.callback();
                this.destroy();
            },

            destroy: function() {
                this.undelegateEvents();
                this.remove();
                this.$parentEl.html('');
            },

            handleKeydown: function( event ) {
                var keyCode = event.keyCode;

                if ( keyCode === constants.keyCodes.esc ) {
                    this.destroy();
                }
            }
        });
    }
);