<div class="alert alert-block">
    <p>{{ _('For additional information on OctoPrint events please see <a href="%(url)s" target="_blank" rel="noopener noreferer">the official documentation</a>.', url='https://docs.octoprint.org/en/master/events/index.html') }}</p>
    <p><strong>{{ _('Warning:') }}</strong> {{ _('For changes to take effect you must restart OctoPrint after saving.') }}</p>
</div>
<div class="row-fluid">
    <div class="span4">{{ _('Event') }}</div>
    <div class="span6">{{ _('Name') }}</div>
    <div class="span2 btn-group">
        <button class="btn btn-mini" data-bind="click: addEvent"><i class="fa fa-plus"></i> {{ _('Add') }}</button>
    </div>
</div>
<div data-bind="foreach: settingsViewModel.settings.plugins.eventmanager.subscriptions" class="row-fluid">
    <div class="row-fluid">
        <div class="span4" data-bind="text: event"></div>
        <div class="span6" data-bind="attr: {title: command}, text: name() ? name() : command()"></div>
        <div class="span2 btn-group">
            <button class="btn btn-mini" data-bind="click: $root.editEvent"><i class="fa fa-pencil"></i></button>
            <button class="btn btn-mini btn-danger" data-bind="click: $root.removeEvent"><i class="fa fa-trash-alt"></i></button>
        </div>
    </div>
</div>

<div id="EventManagerEditor" data-bind="with: selectedCommand" class="modal hide fade-in">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
        <h3>{{ _('Command Editor') }}</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label">{{ _('Event') }}</label>
            <div class="controls">
                <select class="input-block-level" data-bind="value: event, options: $root.settingsViewModel.settings.plugins.eventmanager.availableEvents().sort(), optionsCaption: 'Select Event', valueAllowUnset: true"></select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">{{ _('Name') }}</label>
            <div class="controls">
                <input type="text" class="input-block-level" data-bind="value: name" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">{{ _('Command') }}</label>
            <div class="controls">
                <input type="text" class="input-block-level" data-bind="value: command" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">{{ _('Type') }}</label>
            <div class="controls">
                <select data-bind="value: type, options: ['gcode', 'system'], optionsCaption: 'Select Event Type', valueAllowUnset: true"></select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">{{ _('Enabled') }}</label>
            <div class="controls">
                <input type="checkbox" data-bind="checked: enabled" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">{{ _('Debug') }}</label>
            <div class="controls">
                <input type="checkbox" data-bind="checked: debug" />
            </div>
        </div>
        <p><small>
            {{ _('Please note that any event handlers you define here will be processed <em>asynchronously</em> to OctoPrint\'s own processing of the event. You cannot stall, block or otherwise influence internal execution with event handlers.') }}
        </small></p>
    </div>
    <div class="modal-footer">
        <div class="row-fluid">
            {{ _('Do not forget to save in main settings.') }} <button type="button" class="btn" data-dismiss="modal">{{ _('Close') }}</button>
        </div>
    </div>
</div>
