<div id="alert-word-settings" class="settings-section" data-name="alert-words">
    <form class="form-horizontal" id="alert_word_info_box">
        <p class="alert-word-settings-note">
            {{t "Alert words allow you to be notified as if you were @-mentioned when certain words or phrases are used in Zulip. Alert words are not case sensitive."}}
        </p>
    </form>
    <div class="alert" id="alert_word_status" role="alert">
        <button type="button" class="close close-alert-word-status" aria-label="{{t 'Close' }}">
            <span aria-hidden="true">&times;</span>
        </button>
        <span class="alert_word_status_text"></span>
    </div>
    <form id="create_alert_word_form" class="form-horizontal">
        <div class="add-new-alert-word-box grey-box">
            <div class="new-alert-word-form">
                <h4 class="new-alert-word-section-title settings-section-title no-padding">{{t "Add a new alert word"}}</h4>
                <div class="new-alert-word-form">
                    <div class="input-group">
                        <label for="create_alert_word_name">{{t "New alert word" }}</label>
                        <input type="text" name="alert_word_name" id="create_alert_word_name" class="required"
                          maxlength=100 placeholder="{{t 'Alert word' }}" value="" />
                    </div>
                    <button class="button rounded sea-green add-alert-word" id="create_alert_word_button" type="button">
                        {{t 'Add alert word'}}
                    </button>
                </div>
            </div>
        </div>
    </form>

    <div class="settings_panel_list_header">
        <h3>{{t "Alert words"}}</h3>
    </div>
    <div class="progressive-table-wrapper" data-simplebar>
        <table class="table table-condensed table-striped wrapped-table">
            <thead class="table-sticky-headers">
                <th data-sort="alphabetic" data-sort-prop="word">{{t "Word" }}</th>
                <th class="actions">{{t "Actions" }}</th>
            </thead>
            <tbody id="alert-words-table" class="alert-words-table required-text thick"
              data-empty="{{t 'There are no current alert words.' }}"></tbody>
        </table>
    </div>
</div>
