<% var style = theme.comments.style || 'tabs'; %>
<% var isBoth = (style == 'both'); %>

<%- css('css/comments') %>
<%- diversity_data('comments', comments_config()) %>
<%- js('js/diversity') %>

<div class="comment-wrap">
    <div class="comment-inner">
        <% if (theme.view_injects.comment.length == 1) { %>
            <% var inject_item = theme.view_injects.comment[0]; %>
            <% if (inject_item.locals.showLoading) { %>
                <%- partial('_partial/loading', {showLoading : inject_item.locals.showLoading, id : 'loading-' + inject_item.locals.configKey, text : __('comments.loading')}) %>
            <% } %>
            <%- partial(inject_item.layout, inject_item.locals, inject_item.options) %>

        <% } else if (theme.view_injects.comment.length > 1) { %>
            <div class="comments-tabbable"<% if (style == 'dropdown') { %> style="display:none"<% } %>>
                <ul id="comment-nav-tab" class="comments-nav comments-nav-tabs">
                    <% for (var i = 0; i < theme.view_injects.comment.length; i++) { %>
                        <% var item = theme.view_injects.comment[i]; %>
                        <li class="<%= item.locals.active %>">
                            <a data-toggle="tab" href="#comments-<%= item.locals.class %>" data-comments="<%= item.locals.class %>">
                                <%= item.locals.text %>
                            </a>
                        </li>
                    <% } %>
                </ul>
            </div>

            <div class="comments-dropdown"<% if (style == 'tabs' || isBoth) { %> style="display:none"<% } %>>
                <div class="comments-custom-dropdown" id="comment-nav-dropdown">
                    <button class="comments-dropdown-trigger" id="comment-nav-button" aria-haspopup="listbox" aria-expanded="false">
                        <span class="comments-dropdown-label">
                            <span class="comments-dropdown-text"></span>
                        </span>
                        <span class="comments-dropdown-arrow">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="comments-dropdown-menu" role="listbox" id="comment-nav-menu">
                        <% for (var i = 0; i < theme.view_injects.comment.length; i++) { %>
                            <% var item = theme.view_injects.comment[i]; %>
                            <div class="comments-dropdown-item<%= item.locals.active ? ' active' : '' %>"
                                    role="option"
                                    data-value="<%= item.locals.class %>"
                                    data-text="<%= item.locals.text %>">
                                <span class="comments-dropdown-item-text"><%= item.locals.text %></span>
                                <% if (item.locals.active) { %>
                                    <span class="comments-dropdown-check">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M3 8L6.5 11.5L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                <% } %>
                            </div>
                        <% } %>
                    </div>
                </div>
            </div>

            <div class="comments-tab-content comments-dropdown-content">
                <% if (isBoth) { %>
                    <div class="comments-mode-toggle">
                        <button class="comments-mode-toggle-btn active" data-mode="tabs" title="tabs">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                                <path d="M2 2.5h12v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2.5z" stroke="currentColor" stroke-width="1.2"/>
                                <path d="M2 5h12" stroke="currentColor" stroke-width="1.2"/>
                            </svg>
                        </button>
                        <button class="comments-mode-toggle-btn" data-mode="dropdown" title="dropdown">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                                <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
                                <path d="M5 7l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                <% } %>
                <% for (var i = 0; i < theme.view_injects.comment.length; i++) { %>
                    <% var item = theme.view_injects.comment[i]; %>
                    <div id="comments-<%= item.locals.class %>"
                         class="comments-tab-pane comments-dropdown-pane<%= item.locals.active ? ' active' : '' %>"
                         data-comments="<%= item.locals.class %>">
                        <%- partial('_partial/loading', {showLoading : item.locals.showLoading, id : 'loading-' + item.locals.configKey, text : __('comments.loading')}) %>
                        <%- partial(item.layout, item.locals, item.options) %>
                    </div>
                <% } %>
            </div>

            <%- js('js/js.cookie-2.2.1.min') %>
            <%- js('js/tab') %>
            <%- js('js/dropdown') %>
            <% if (isBoth) { %>
                <%- js('js/mode-toggle') %>
            <% } %>
        <% } %>
    </div>
</div>

<%- diversity_injects('pageEnd') %>
