{% if S_ANNOUNCEMENTSHOUTBOX %}
{% INCLUDECSS '@spiderpiggy_announcementshoutbox/announcementshoutbox.css' %}
{% INCLUDEJS '@spiderpiggy_announcementshoutbox/announcementshoutbox.js' %}

<script>
var ASB_CONFIG = {
	root_path: '{{ ROOT_PATH }}'
};
</script>

<div class="announcement-shoutbox-shell" data-announcementshoutbox-shell="1">
    <div class="announcement-shoutbox announcement-shoutbox--{{ ANNOUNCEMENTSHOUTBOX_MODE }}">
        <div class="announcement-shoutbox__viewport">
            <div class="announcement-shoutbox__topline">
                <div class="announcement-shoutbox__badge">
                    <i class="icon {{ ANNOUNCEMENTSHOUTBOX_HEADER_ICON|e('html_attr') }} fa-fw" aria-hidden="true"></i>
                    <span>{{ ANNOUNCEMENTSHOUTBOX_HEADER_TEXT }}</span>
                </div>

                {% if ANNOUNCEMENTSHOUTBOX_MODE == 'rotate' %}
                    <button type="button" class="announcement-shoutbox__mode-chip announcement-shoutbox__mode-chip--button" data-announcementshoutbox-next="1">
                        {{ lang('ANNOUNCEMENTSHOUTBOX_MODE_ROTATE') }}
                    </button>
                {% else %}
                    <span class="announcement-shoutbox__mode-chip">{{ lang('ANNOUNCEMENTSHOUTBOX_MODE_TICKER') }}</span>
                {% endif %}
            </div>

            {% if ANNOUNCEMENTSHOUTBOX_MODE == 'ticker' %}
                <div class="announcement-shoutbox__ticker" data-announcementshoutbox-ticker="1">
                    <div class="announcement-shoutbox__ticker-track" style="{% if ANNOUNCEMENTSHOUTBOX_TICKER_SPEED %}animation-duration: {{ ANNOUNCEMENTSHOUTBOX_TICKER_SPEED }}ms;{% endif %}{% if ANNOUNCEMENTSHOUTBOX_STARTUP_DELAY %} animation-delay: {{ ANNOUNCEMENTSHOUTBOX_STARTUP_DELAY }}ms;{% endif %}">
                        {% for announcementshoutbox_messages in loops.announcementshoutbox_messages %}
                            <div class="announcement-shoutbox__ticker-item">
                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_AVATAR and announcementshoutbox_messages.AVATAR %}
                                    <span class="announcement-shoutbox__avatar announcement-shoutbox__avatar--ticker">{{ announcementshoutbox_messages.AVATAR }}</span>
                                {% endif %}
                                {% if announcementshoutbox_messages.U_PROFILE %}
                                    <a class="announcement-shoutbox__ticker-author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}" href="{{ announcementshoutbox_messages.U_PROFILE }}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</a>
                                {% else %}
                                    <span class="announcement-shoutbox__ticker-author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</span>
                                {% endif %}
                                <span class="announcement-shoutbox__separator">›</span>
                                <span class="announcement-shoutbox__ticker-text">{{ announcementshoutbox_messages.MESSAGE }}</span>
                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_TIME %}
                                    <span class="announcement-shoutbox__ticker-time">{{ announcementshoutbox_messages.POST_TIME }}</span>
                                {% endif %}
                                {% if announcementshoutbox_messages.S_CAN_DELETE %}
                                    <a class="announcement-shoutbox__delete announcement-shoutbox__delete--icon" href="{{ announcementshoutbox_messages.U_DELETE }}" title="{{ lang('DELETE') }}" aria-label="{{ lang('DELETE') }}">×</a>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="announcement-shoutbox__ticker-item announcement-shoutbox__ticker-item--empty">{{ lang('ANNOUNCEMENTSHOUTBOX_NO_MESSAGES') }}</div>
                        {% endfor %}

                        {% for announcementshoutbox_messages in loops.announcementshoutbox_messages %}
                            <div class="announcement-shoutbox__ticker-item announcement-shoutbox__ticker-item--clone" aria-hidden="true">
                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_AVATAR and announcementshoutbox_messages.AVATAR %}
                                    <span class="announcement-shoutbox__avatar announcement-shoutbox__avatar--ticker">{{ announcementshoutbox_messages.AVATAR }}</span>
                                {% endif %}
                                {% if announcementshoutbox_messages.U_PROFILE %}
                                    <a class="announcement-shoutbox__ticker-author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}" href="{{ announcementshoutbox_messages.U_PROFILE }}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</a>
                                {% else %}
                                    <span class="announcement-shoutbox__ticker-author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</span>
                                {% endif %}
                                <span class="announcement-shoutbox__separator">›</span>
                                <span class="announcement-shoutbox__ticker-text">{{ announcementshoutbox_messages.MESSAGE }}</span>
                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_TIME %}
                                    <span class="announcement-shoutbox__ticker-time">{{ announcementshoutbox_messages.POST_TIME }}</span>
                                {% endif %}
								{% if announcementshoutbox_messages.S_CAN_DELETE %}
									<a class="announcement-shoutbox__delete announcement-shoutbox__delete--icon" href="{{ announcementshoutbox_messages.U_DELETE }}" title="{{ lang('DELETE') }}" aria-label="{{ lang('DELETE') }}">×</a>
								{% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="announcement-shoutbox__slides" data-announcementshoutbox-rotate="{{ ANNOUNCEMENTSHOUTBOX_INTERVAL }}" data-announcementshoutbox-startup-delay="{{ ANNOUNCEMENTSHOUTBOX_STARTUP_DELAY }}">
                    {% for announcementshoutbox_messages in loops.announcementshoutbox_messages %}
                        <article class="announcement-shoutbox__slide{% if loop.first %} is-active{% endif %}">
                            <header class="announcement-shoutbox__meta">
                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_AVATAR and announcementshoutbox_messages.AVATAR %}
                                    <span class="announcement-shoutbox__avatar">{{ announcementshoutbox_messages.AVATAR }}</span>
                                {% endif %}
                                {% if announcementshoutbox_messages.U_PROFILE %}
                                    <a class="announcement-shoutbox__author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}" href="{{ announcementshoutbox_messages.U_PROFILE }}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</a>
                                {% else %}
                                    <span class="announcement-shoutbox__author{% if announcementshoutbox_messages.USERNAME_COLOUR %} username-coloured{% else %} username{% endif %}"{% if announcementshoutbox_messages.USERNAME_COLOUR %} style="color: {{ announcementshoutbox_messages.USERNAME_COLOUR }};"{% endif %}>{{ announcementshoutbox_messages.USERNAME }}</span>
                                {% endif %}

                                {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_TIME %}
                                    <span class="announcement-shoutbox__time">{{ announcementshoutbox_messages.POST_TIME }}</span>
                                {% endif %}

                                {% if announcementshoutbox_messages.S_CAN_DELETE %}
                                    <a class="announcement-shoutbox__delete announcement-shoutbox__delete--icon" href="{{ announcementshoutbox_messages.U_DELETE }}" title="{{ lang('DELETE') }}" aria-label="{{ lang('DELETE') }}">×</a>
                                {% endif %}
                            </header>
                            <div class="announcement-shoutbox__message"><span class="announcement-shoutbox__message-separator">›</span> {{ announcementshoutbox_messages.MESSAGE }}</div>
                        </article>
                    {% else %}
                        <article class="announcement-shoutbox__slide is-active announcement-shoutbox__slide--empty">
                            <div class="announcement-shoutbox__message">{{ lang('ANNOUNCEMENTSHOUTBOX_NO_MESSAGES') }}</div>
                        </article>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {% if S_ANNOUNCEMENTSHOUTBOX_CAN_POST %}
            <details class="announcement-shoutbox__composer">
                <summary class="announcement-shoutbox__composer-summary">
                    <span class="announcement-shoutbox__composer-toggle">{{ lang('ANNOUNCEMENTSHOUTBOX_COMPOSER_TITLE') }}</span>
                </summary>

                <div class="announcement-shoutbox__composer-body">
                    <form id="announcementshoutbox_postform" name="announcementshoutbox_postform" action="{{ ANNOUNCEMENTSHOUTBOX_FORM_ACTION }}" method="post" class="announcement-shoutbox__form" data-announcementshoutbox-form="1">
                        <input type="hidden" name="hash" value="{{ ANNOUNCEMENTSHOUTBOX_FORM_TOKEN }}">

                        {% if S_ANNOUNCEMENTSHOUTBOX_SHOW_BBCODE %}
                            <div class="announcement-shoutbox__toolbar-wrap">
                                <div class="announcement-shoutbox__toolbar" role="toolbar" aria-label="Shoutbox tools">
                                    <button type="button" class="announcement-shoutbox__tool" data-asb-wrap="b" title="{{ lang('BBCODE_B_HELP')|striptags }}" aria-label="{{ lang('BBCODE_B_HELP')|striptags }}"><strong>B</strong></button>
                                    <button type="button" class="announcement-shoutbox__tool" data-asb-wrap="i" title="{{ lang('BBCODE_I_HELP')|striptags }}" aria-label="{{ lang('BBCODE_I_HELP')|striptags }}"><em>I</em></button>
                                    <button type="button" class="announcement-shoutbox__tool" data-asb-wrap="u" title="{{ lang('BBCODE_U_HELP')|striptags }}" aria-label="{{ lang('BBCODE_U_HELP')|striptags }}"><span class="announcement-shoutbox__tool-underline">U</span></button>
                                    <button type="button" class="announcement-shoutbox__tool announcement-shoutbox__tool--color" data-asb-color-toggle="1" title="{{ lang('BBCODE_COLOR_HELP')|striptags }}" aria-label="{{ lang('BBCODE_COLOR_HELP')|striptags }}"><i class="icon fa-tint fa-fw" aria-hidden="true"></i></button>
                                    <div class="announcement-shoutbox__color-panel" data-asb-color-panel="1" hidden>
                                        <div class="announcement-shoutbox__color-title">{{ lang('BBCODE_COLOR_HELP') }}{{ lang('COLON') }}</div>
                                        <div class="announcement-shoutbox__color-grid">
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#000000" style="background:#000000;" aria-label="#000000" title="#000000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#000080" style="background:#000080;" aria-label="#000080" title="#000080"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#0000cd" style="background:#0000cd;" aria-label="#0000cd" title="#0000cd"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#0000ff" style="background:#0000ff;" aria-label="#0000ff" title="#0000ff"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#330099" style="background:#330099;" aria-label="#330099" title="#330099"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#006600" style="background:#006600;" aria-label="#006600" title="#006600"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#008080" style="background:#008080;" aria-label="#008080" title="#008080"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#006699" style="background:#006699;" aria-label="#006699" title="#006699"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#0099cc" style="background:#0099cc;" aria-label="#0099cc" title="#0099cc"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#00cc66" style="background:#00cc66;" aria-label="#00cc66" title="#00cc66"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#00ccff" style="background:#00ccff;" aria-label="#00ccff" title="#00ccff"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#00ff00" style="background:#00ff00;" aria-label="#00ff00" title="#00ff00"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#00ffff" style="background:#00ffff;" aria-label="#00ffff" title="#00ffff"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#666600" style="background:#666600;" aria-label="#666600" title="#666600"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#666699" style="background:#666699;" aria-label="#666699" title="#666699"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#800000" style="background:#800000;" aria-label="#800000" title="#800000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#800080" style="background:#800080;" aria-label="#800080" title="#800080"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#808000" style="background:#808000;" aria-label="#808000" title="#808000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#808080" style="background:#808080;" aria-label="#808080" title="#808080"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#990000" style="background:#990000;" aria-label="#990000" title="#990000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#993300" style="background:#993300;" aria-label="#993300" title="#993300"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#993366" style="background:#993366;" aria-label="#993366" title="#993366"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#999900" style="background:#999900;" aria-label="#999900" title="#999900"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#999999" style="background:#999999;" aria-label="#999999" title="#999999"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#cc0000" style="background:#cc0000;" aria-label="#cc0000" title="#cc0000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#cc6600" style="background:#cc6600;" aria-label="#cc6600" title="#cc6600"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#cc6699" style="background:#cc6699;" aria-label="#cc6699" title="#cc6699"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#cccc00" style="background:#cccc00;" aria-label="#cccc00" title="#cccc00"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#cccccc" style="background:#cccccc;" aria-label="#cccccc" title="#cccccc"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ff0000" style="background:#ff0000;" aria-label="#ff0000" title="#ff0000"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ff6600" style="background:#ff6600;" aria-label="#ff6600" title="#ff6600"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ff9900" style="background:#ff9900;" aria-label="#ff9900" title="#ff9900"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffcc00" style="background:#ffcc00;" aria-label="#ffcc00" title="#ffcc00"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffcc99" style="background:#ffcc99;" aria-label="#ffcc99" title="#ffcc99"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffcccc" style="background:#ffcccc;" aria-label="#ffcccc" title="#ffcccc"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ff00ff" style="background:#ff00ff;" aria-label="#ff00ff" title="#ff00ff"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ff99cc" style="background:#ff99cc;" aria-label="#ff99cc" title="#ff99cc"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffff00" style="background:#ffff00;" aria-label="#ffff00" title="#ffff00"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffff99" style="background:#ffff99;" aria-label="#ffff99" title="#ffff99"></button>
                                            <button type="button" class="announcement-shoutbox__color-swatch" data-asb-color="#ffffff" style="background:#ffffff;" aria-label="#ffffff" title="#ffffff"></button>
                                        </div>
                                    </div>
                                    <button type="button" class="announcement-shoutbox__tool" data-asb-url="1" title="{{ lang('BBCODE_W_HELP')|striptags }}" aria-label="{{ lang('BBCODE_W_HELP')|striptags }}">🔗</button>
                                    <button type="button" class="announcement-shoutbox__tool announcement-shoutbox__tool--smiley" data-asb-smiley-toggle="1" title="{{ lang('SMILIES_ARE_ON')|striptags }}" aria-label="{{ lang('SMILIES_ARE_ON')|striptags }}">🙂</button>
                                </div>

                                <div class="sb-emoji-panel" id="sb-emoji-panel">
                                    <input type="text" id="emoji-search" class="inputbox" placeholder="Emoji zoeken...">

                                    <div class="sb-emoji-categories">
                                        <button type="button" data-cat="people">🙂</button>
                                        <button type="button" data-cat="body">🧑</button>
                                        <button type="button" data-cat="nature">🌿</button>
                                        <button type="button" data-cat="food">🍕</button>
                                        <button type="button" data-cat="activity">⚽</button>
                                        <button type="button" data-cat="travel">🚗</button>
                                        <button type="button" data-cat="objects">💡</button>
                                        <button type="button" data-cat="symbols">❤️</button>
                                        <button type="button" data-cat="flags">🏳️</button>
                                    </div>

                                    <div class="sb-emoji-list" id="emoji-list"></div>
                                </div>
                            </div>
                        {% endif %}

                        <div class="announcement-shoutbox__textarea-wrap">
                            <textarea name="message" id="announcementshoutbox_message" rows="1" cols="76" maxlength="{{ ANNOUNCEMENTSHOUTBOX_MAX_LENGTH }}" class="inputbox announcement-shoutbox__textarea" placeholder="{{ lang('ANNOUNCEMENTSHOUTBOX_PLACEHOLDER') }}" data-announcementshoutbox-counter="1"></textarea>
                        </div>

                        <div class="announcement-shoutbox__footer">
                            <div class="announcement-shoutbox__status-wrap">
                                <span class="announcement-shoutbox__limit">{{ lang('ANNOUNCEMENTSHOUTBOX_LIMIT_LABEL') }} <span data-announcementshoutbox-counter-current>{{ ANNOUNCEMENTSHOUTBOX_MAX_LENGTH }}</span> / {{ ANNOUNCEMENTSHOUTBOX_MAX_LENGTH }}</span>
                                <span class="announcement-shoutbox__typing" data-announcementshoutbox-typing data-announcementshoutbox-typing-label="{{ lang('ANNOUNCEMENTSHOUTBOX_TYPING') }}" data-announcementshoutbox-sending-label="{{ lang('ANNOUNCEMENTSHOUTBOX_SENDING') }}" aria-live="polite"></span>
                            </div>
                            <input type="submit" class="button1 announcement-shoutbox__submit" value="{{ lang('SUBMIT') }}" data-announcementshoutbox-submit="1" data-announcementshoutbox-sending-label="{{ lang('ANNOUNCEMENTSHOUTBOX_SENDING') }}">
                        </div>
                    </form>
                </div>
            </details>
        {% endif %}
    </div>
</div>
{% endif %}