<div id="emoji-settings" data-name="emoji-settings" class="settings-section">
    <div class="emoji-settings-tip-container">
        {{> emoji_settings_tip}}
    </div>
    <p class="add-emoji-text {{#unless can_add_emojis}}hide{{/unless}}">
        {{#tr}}Add extra emoji for members of the {realm_name} organization.{{/tr}}
    </p>
    <form class="form-horizontal admin-emoji-form {{#unless can_add_emojis}}hide{{/unless}}">
        <div class="add-new-emoji-box grey-box">
            <div class="new-emoji-form">
                <div class="settings-section-title new-emoji-section-title no-padding">{{t "Add a new emoji" }}</div>
                <div class="alert" id="admin-emoji-status"></div>
                <div class="inline-block">
                    <label for="emoji_name">{{t "Emoji name" }}</label>
                    <input type="text" name="name" id="emoji_name" placeholder="{{t 'leafy green vegetable' }}" />
                </div>
                <div class="inline-block">
                    <span id="emoji-file-name"></span>
                    <input type="file" name="emoji_file_input" class="notvisible"
                      id="emoji_file_input" value="{{t 'Upload image or GIF' }}"/>
                    <button class="button white rounded" style="display: none;" id="emoji_image_clear_button">{{t "Clear emoji image" }}</button>
                    <button class="button rounded" id="emoji_upload_button">{{t "Upload image or GIF" }}</button>
                </div>
                <button id="admin_emoji_submit" type="submit" class="button rounded sea-green">
                    {{t 'Add emoji' }}
                </button>
            </div>
            <span id="emoji_file_input_error" class="text-error"></span>
            <span style="display: none;" id="emoji_preview_text">
                Preview: <img class="emoji" id="emoji_preview_image" />
            </span>
        </div>
    </form>

    <div class="settings_panel_list_header">
        <h3>{{t "Custom emoji"}}</h3>
        <input type="text" class="search" placeholder="{{t 'Filter emoji' }}"
          aria-label="{{t 'Filter emoji' }}"/>
    </div>
    <div class="progressive-table-wrapper" data-simplebar>
        <table class="table table-condensed table-striped wrapped-table admin_emoji_table">
            <thead class="table-sticky-headers">
                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
                <th class="image">{{t "Image" }}</th>
                <th class="image" data-sort="author_full_name">{{t "Author" }}</th>
                <th class="actions">{{t "Actions" }}</th>
            </thead>
            <tbody id="admin_emoji_table" class="required-text" data-empty="{{t 'No custom emoji.' }}"></tbody>
        </table>
    </div>
</div>
