{$_we_are_all_in = $wa->tasks->isPremium()}

{if !$_we_are_all_in}
    <div class="box">
        <h3>[`Premium only`]</h3>
        <p class="small">
          <i class="fas fa-star text-yellow"></i> [`Upgrade to premium to have the feature enabled and this message to disappear permanently.`]
        </p>
        <a href="{$wa_app_url}#/upgrade/" class="button yellow small">[`See what’s there in premium`]</a>
        <hr class="custom-mt-24" />
    </div>
{/if}

<link rel="stylesheet" href="{$wa_app_static_url}css/gantt.css?v={$wa->version()}">

<div class="gantt-container"{if !$_we_are_all_in} style="opacity: 0.6;"{/if}>
    <div class="gantt-controls"{if !$_we_are_all_in} style="display: none;"{/if}>

        <div class="small">
            <a href="#/settings/scope/add/">
                <i class="fas fa-plus-circle text-green"></i>
                [`Add scope`]
            </a>
        </div>

        <div class="dropdown small" id="dropdown-project" style="z-index: 9999;">
            <button class="dropdown-toggle button light-gray" type="button">[`All projects`]</button>
            <div class="dropdown-body">
                <ul class="menu">
                    <li>
                        <a href="javascript:void(0);" data-id="">
                            <span>[`All projects`]</span>
                        </a>
                    </li>
                    {foreach $projects as $p}
                        <li>
                            <a href="javascript:void(0);" data-value="{$p.id}">
                                {if $p.icon_url}
                                <span class="icon">
                                    <i class="size-20 t-project-icon-rounded" style="background-image: url({$p.icon_url});"></i>
                                </span>
                                {/if}
                                <span>{$p.name|escape|truncate:42}</span>
                            </a>
                        </li>
                    {/foreach}
                </ul>

            </div>

        </div>

        <div class="dropdown small" id="dropdown-from" style="z-index: 9999;">
            <button class="dropdown-toggle button light-gray" type="button">{sprintf_wp('%s mo.', '-1')}</button>
            <div class="dropdown-body">
                <ul class="menu">
                    <li>
                        <a href="javascript:void(0);" data-value="-1">
                            <span>{sprintf_wp('%s mo.', '-1')}</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-value="-3">
                            <span>{sprintf_wp('%s mo.', '-3')}</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-value="-12">
                            <span>{sprintf_wp('%s mo.', '-12')}</span>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <div class="dropdown small" id="dropdown-to" style="z-index: 9999;">
            <button class="dropdown-toggle button light-gray" type="button">{sprintf_wp('%s mo.', '+12')}</button>
            <div class="dropdown-body">
                <ul class="menu">
                    <li>
                        <a href="javascript:void(0);" data-value="3">
                            <span>{sprintf_wp('%s mo.', '+3')}</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-value="6">
                            <span>{sprintf_wp('%s mo.', '+6')}</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-value="12">
                            <span>{sprintf_wp('%s mo.', '+12')}</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-value="36">
                            <span>{sprintf_wp('%s mo.', '+36')}</span>
                        </a>
                    </li>
                </ul>

            </div>

        </div>
        <label class="flexbox space-8"><small>[`Zoom`]:</small> <input type="range" id="zoom-slider" min="0" max="80" step="1" value="0"></label>
        <div class="small">
            <a
                href="#"
                id="dropdown-hide-closed"
                data-label-show="[`Hide completed scopes`]"
                data-label-hide="[`Show completed scopes`]"
            ></a>
        </div>
    </div>

    <div class="gantt-table">
        <div class="gantt-left-column hide-scrollbar" id="left-col"></div>
        <div class="gantt-right-timeline-wrapper" id="right-wrapper">
            <div class="gantt-header" id="timeline-header"></div>
            <div class="gantt-right-timeline" id="timeline"></div>
        </div>
    </div>
</div>

<template id="milestone-row">
  <div class="flexbox width-100">
    <div class="gantt-row__name wide flexbox middle space-4"></div>
    <div class="gantt-row__users flexbox middle"></div>
  </div>
</template>

<script src="{$wa_app_static_url}js/gantt.js?v={$wa->version()}"></script>
<script>
    (() => {
        const milestones = {json_encode(array_values($milestones))};
        new GanttChart({
            data: milestones,
            leftColId: 'left-col',
            timelineId: 'timeline',
            rightWrapperId: 'right-wrapper',
            timelineHeaderId: 'timeline-header',
            zoomSliderId: 'zoom-slider',
            locale: '{$wa->locale()}'
        });
    })();
</script>