{$_backend_sidebar = $backend_settings_sidebar|default:[]}
{$_is_premium = $wa->tasks->isPremium()}

<div class="sidebar width-21rem bordered-right t-settings-sidebar" id="t-settings-sidebar-wrapper">

    <ul class="menu large">
        <li>
            <a href="#/personal-settings/">
                <span class="icon"><img src="{$wa->user()->getPhoto(96)}" class="userpic"></span>
                <span>
                  [`My preferences`]
                </span>
            </a>
        </li>
        <li>
            <a href="#/settings/" class="" data-item-type="statuses">
                <span class="icon">
                    <i class="fas fa-flag"></i>
                </span>
                [`Task statuses`]
            </a>
        </li>
        <li>
            <a href="#/types-settings/" class="{if !$_is_premium}opacity-50{/if}" data-item-type="task_types">
                <span class="icon">
                    <i class="fas fa-shapes"></i>
                </span>
                <span>[`Task types`]</span>
                {if !$_is_premium}
                    <span class="count small"><i class="fas fa-star text-yellow"></i></span>
                {/if}
            </a>
        </li>
        <li>
            <a href="#/fields-settings/" class="{if !$_is_premium}opacity-50{/if}" data-item-type="task_fields">
                <span class="icon">
                    <i class="fas fa-list"></i>
                </span>
                <span>[`Task fields`]</span>
                {if !$_is_premium}
                    <span class="count small"><i class="fas fa-star text-yellow"></i></span>
                {/if}
            </a>
        </li>
        <li>
            <a href="#/user-roles/" class="{if !$_is_premium}opacity-50{/if}" data-item-type="user_roles">
                <span class="icon">
                    <i class="fas fa-user-plus"></i>
                </span>
                <span>[`Roles`]</span>
                {if !$_is_premium}
                    <span class="count small"><i class="fas fa-star text-yellow"></i></span>
                {/if}
            </a>
        </li>
        {if $_is_premium}
            <li class="top-padded">
                <a href="#/upgrade/">
                    <i class="fas fa-star"></i>
                    <span>[`Premium`]</span>
                </a>
            </li>
        {/if}
        <!-- plugin hook: 'backend_settings_sidebar.top_li' -->
        {* @event backend_settings_sidebar.%plugin_id%.top_li *}
        {if !empty($_backend_sidebar) && count($_backend_sidebar) > 0}
            {foreach $_backend_sidebar as $_}{ifset($_.top_li)}{/foreach}
        {/if}
    </ul>

    <!-- MILESTONES -->
    <div class="box flexbox space-4">
        <h5 class="wide custom-my-4">[`Scopes`]</h5>
        <a href="#/settings/scope/add/" class="count large"><i class="fas fa-plus-circle text-green"></i></a>
    </div>
    {if !$scopes}
        <div class="box align-center custom-mt-0 custom-mb-16">
            <p class="hint">[`Add a milestone to group tasks into time-based activities such as sprints, releases, or subprojects.`]</p>
        </div>
    {/if}
    <ul class="menu t-scopes-list-wrapper custom-my-0">
        {foreach $scopes as $_scope}
            <li data-id="{$_scope.id}" data-item-type="scope">
                <a href="#/settings/scope/{$_scope.id}/">{strip}
                    {$_scope.project.icon_html}
                    <span class="t-scope-name js-scope-name">
                        {$_scope.name|default:'[`(no name)`]'|escape}
                        {if !empty($_scope.due_date)}
                            <p class="hint">{wa_date('humandate', $_scope.due_date, waDateTime::getDefaultTimezone())|escape}</p>
                        {/if}

                    </span>
                {/strip}</a>
            </li>
        {/foreach}
    </ul>

    {if $archive_scopes}
        <ul class="menu js-archived-item-list custom-my-0" data-list-type="scopes" style="display: none;">
            {foreach $archive_scopes as $_scope}
                <li data-id="{$_scope.id}" data-item-type="scope" data-is-archived="1">
                    <a href="#/settings/scope/{$_scope.id}/">
                        {$_scope.project.icon_html}
                        <span class="js-scope-name t-scope-name text-gray">{$_scope.name|default:'[`(no name)`]'|escape} <span class="hint"><i class="fas fa-check fa-xs"></i></span></span>
                    </a>
                </li>
            {/foreach}
        </ul>
    {/if}

    {if $archive_scopes}
    <ul class="menu custom-mt-0">
        <li class="js-show-archived-scopes">
            {$_count = count($archive_scopes)}
            {$_text_hidden = _w('Show %d completed milestone', 'Show %d completed milestones', $_count)}
            {$_text_shown = _w('Hide completed milestone', 'Hide completed milestones', $_count)}
            <a href="javascript:void(0);" class="small text-gray js-archived-item-list-toggle align-center"
               data-list-type="scopes"  data-text-shown="{$_text_shown}" data-text-hidden="{$_text_hidden}">
               <span>{$_text_hidden}</span>
           </a>
        </li>
    </ul>
    {/if}

    <!-- PROJECTS -->
    <div class="box flexbox space-4">
        <h5 class="wide custom-my-4">[`Projects`]</h5>
        <a href="#/settings/project/add/" class="count large"><i class="fas fa-plus-circle text-green"></i></a>
    </div>
    <ul class="menu custom-my-0" id="t-projects-list-settings">
        {foreach $projects as $p}
            <li data-id="{$p.id}" data-item-type="project">
                <a href="#/settings/project/{$p.id}/">{strip}
                    {$p.icon_html}
                    <span class="js-project-name">{$p.name|default:'[`(no name)`]'|escape}</span>
                    {if !empty($p.color) && ($p.color != "t-white")}
                        <span class="icon"><i class="rounded bg-{$p.color}"></i></span>
                    {/if}
                {/strip}</a>
            </li>
        {/foreach}
    </ul>

    {if $archive_projects}
        <ul class="menu custom-my-0 js-archived-item-list" id="archived-projects-list" data-list-type="projects" {if empty($project.archive_datetime)}style="display: none"{/if}>
            {foreach $archive_projects as $p}
                <li data-id="{$p.id}" data-item-type="project" data-is-archived="1">
                    <a href="#/settings/project/{$p.id}/">
                        {$p.icon_html}
                        <span class="js-project-name text-gray">{$p.name|default:'[`(no name)`]'|escape} <span class="hint"><i class="fas fa-archive fa-xs"></i></span></span>
                    </a>
                </li>
            {/foreach}
        </ul>
    {/if}

    {if $archive_projects}
        <ul class="menu custom-mt-0">
            <li id="t-show-archived-projects">
                {$_count = count($archive_projects)}
                {$_text_hidden = _w('Show %d archived project', 'Show %d archived projects', $_count)}
                {$_text_shown = _w('Hide archived project', 'Hide archived projects', $_count)}
                <a href="javascript:void(0);" class="small text-gray js-archived-item-list-toggle"
                   data-list-type="projects" data-text-shown="{$_text_shown}" data-text-hidden="{$_text_hidden}">{$_text_hidden}</a>
            </li>
        </ul>
    {/if}

    <!-- plugin hook: 'backend_settings_sidebar.section' -->
    {* @event backend_settings_sidebar.%plugin_id%.section *}
    {foreach $_backend_sidebar as $_}{ifset($_.section)}{/foreach}

</div>

<script>(function($) {
    new TasksSettingsSidebar({
        '$wrapper': $('#t-settings-sidebar-wrapper')
    });
})(jQuery);</script>