{#
	What each mode's page looks like while it loads, shown the moment its menu link is clicked: the same
	breadcrumb, tabs and layout as the page itself, with shimmering bars where its content will be.
#}
{% macro bar(width, height = 12, classes = '') %}
	<div class="load-wrapper {{ classes }}" style="width: {{ width }}; height: {{ height }}px;"><div class="activity"></div></div>
{% endmacro %}

{% macro crumbs(mode, label) %}
	<div class="operator-step-tabs shield-mode-nav-placeholder__breadcrumbs">
		<div class="operator-step-tabs__list">
			<span class="operator-step-tabs__tab" data-color-key="home">
				<i class="operator-step-tabs__tab-icon bi bi-house-fill" aria-hidden="true"></i>
			</span>
			<span class="operator-step-tabs__tab is-active" data-color-key="{{ mode }}">
				<span class="operator-step-tabs__tab-label">{{ label }}</span>
			</span>
		</div>
	</div>
{% endmacro %}

{% macro tabs(widths, mode) %}
	{% from _self import bar %}
	{% set mode_class = { investigate: 'shield-tabs--investigate', reports: 'shield-tabs--reports', configure: 'shield-tabs--configure' }[ mode ]|default('') %}
	<div class="shield-tabs {{ mode_class }} shield-mode-nav-placeholder__tabs">
		<div class="shield-tabs__list">
			{% for width in widths %}
				<span class="shield-tabs__tab{{ loop.first ? ' is-current' : '' }}">{{ bar( width ~ 'px', 12 ) }}</span>
			{% endfor %}
		</div>
	</div>
{% endmacro %}

{% from _self import bar, crumbs, tabs %}

{% set mode_labels = {} %}
{% for nav_item in vars.nav_sidebar.navigation_links|default([]) %}
	{% if nav_item.kind == 'operator_mode' %}
		{% set mode_labels = mode_labels|merge( { (nav_item.mode): nav_item.title } ) %}
	{% endif %}
{% endfor %}

{# Actions Queue: its sections, the first one open. #}
<div class="d-none shield_loading_placeholder shield-mode-nav-placeholder"
	 data-shield-nav-loading-placeholder="actions"
	 aria-hidden="true">
	{{ crumbs( 'actions', mode_labels.actions|default('') ) }}
	<div class="shield-mode-nav-placeholder__toolbar">{{ bar( '150px', 30 ) }}</div>
	<div class="shield-mode-nav-placeholder__stack">
		<div class="shield-mode-nav-placeholder__box">
			<div class="shield-mode-nav-placeholder__box-head">{{ bar( '38%', 14 ) }}</div>
			{% for width in [ 46, 40, 52 ] %}
				<div class="shield-mode-nav-placeholder__row">
					{{ bar( '28px', 28 ) }}
					<div class="shield-mode-nav-placeholder__row-copy">
						{{ bar( width ~ '%', 13 ) }}
						{{ bar( ( width - 14 ) ~ '%', 10 ) }}
					</div>
				</div>
			{% endfor %}
		</div>
		{% for width in [ 44, 52, 30 ] %}
			<div class="shield-mode-nav-placeholder__box">
				<div class="shield-mode-nav-placeholder__box-head">{{ bar( width ~ '%', 14 ) }}</div>
			</div>
		{% endfor %}
	</div>
</div>

{# Investigate: its tabs, then the lookup. #}
<div class="d-none shield_loading_placeholder shield-mode-nav-placeholder"
	 data-shield-nav-loading-placeholder="investigate"
	 aria-hidden="true">
	{{ crumbs( 'investigate', mode_labels.investigate|default('') ) }}
	{{ tabs( [ 58, 112, 112, 62, 96, 84 ], 'investigate' ) }}
	<div class="shield-mode-nav-placeholder__lookup">
		<div class="shield-mode-nav-placeholder__search">{{ bar( '46%', 14 ) }}</div>
		<div class="shield-mode-nav-placeholder__chips">
			{{ bar( '64px', 12 ) }}
			{% for width in [ 62, 46, 78, 54, 54, 92 ] %}
				{{ bar( width ~ 'px', 28, 'shield-mode-nav-placeholder__chip' ) }}
			{% endfor %}
		</div>
		{{ bar( '72%', 12 ) }}
	</div>
</div>

{# Configure: its tabs, the search, then what needs attention. #}
<div class="d-none shield_loading_placeholder shield-mode-nav-placeholder"
	 data-shield-nav-loading-placeholder="configure"
	 aria-hidden="true">
	{{ crumbs( 'configure', mode_labels.configure|default('') ) }}
	{{ tabs( [ 50, 64, 40, 52, 36, 36, 70, 50, 52, 46 ], 'configure' ) }}
	<div class="shield-mode-nav-placeholder__search">{{ bar( '42%', 14 ) }}</div>
	{{ bar( '110px', 10, 'shield-mode-nav-placeholder__label' ) }}
	<div class="shield-mode-nav-placeholder__box">
		{% for width in [ 30, 26, 34, 28, 24 ] %}
			<div class="shield-mode-nav-placeholder__row">
				{{ bar( '8px', 8, 'shield-mode-nav-placeholder__dot' ) }}
				<div class="shield-mode-nav-placeholder__row-copy">
					{{ bar( width ~ '%', 13 ) }}
					{{ bar( ( width + 22 ) ~ '%', 10 ) }}
				</div>
			</div>
		{% endfor %}
	</div>
</div>

{# Reports: its tabs, then charts and trends. #}
<div class="d-none shield_loading_placeholder shield-mode-nav-placeholder"
	 data-shield-nav-loading-placeholder="reports"
	 aria-hidden="true">
	{{ crumbs( 'reports', mode_labels.reports|default('') ) }}
	{{ tabs( [ 120, 116, 220 ], 'reports' ) }}
	<div class="shield-mode-nav-placeholder__box shield-mode-nav-placeholder__box--padded">
		{{ bar( '30%', 14 ) }}
		<div class="shield-mode-nav-placeholder__chips">
			{% for width in [ 96, 120, 88, 132, 104 ] %}
				{{ bar( width ~ 'px', 28, 'shield-mode-nav-placeholder__chip' ) }}
			{% endfor %}
		</div>
		{{ bar( '100%', 220 ) }}
	</div>
</div>