{% extends '/wpadmin/plugin_pages/base_inner_page.twig' %}

{% block inner_page_body %}

	{% if flags.can_importexport %}
		<div class="import-export-page" data-import-export-page="1">
			{% if flags.has_network_invite_review %}
				{% include '/wpadmin_pages/insights/importexport/network_invite_review.twig' with {
					network_invite_review: vars.network_invite_review
				} only %}
			{% else %}
				<ul class="nav nav-tabs import-export-tabs" role="tablist">
					{% for tab in vars.import_export_tabs %}
						<li class="nav-item" role="presentation">
							<button type="button"
									id="{{ tab.tab_id }}"
									class="nav-link import-export-tabs__tab{% if tab.is_active %} active{% endif %}{% if not tab.is_available %} is-unavailable{% endif %}"
									data-bs-toggle="tab"
									data-bs-target="#{{ tab.panel_id }}"
									data-import-export-tab="{{ tab.key }}"
									data-import-export-tab-available="{{ tab.is_available ? '1' : '0' }}"
									role="tab"
									aria-controls="{{ tab.panel_id }}"
									aria-selected="{{ tab.is_active ? 'true' : 'false' }}">
								<i class="{{ tab.icon_class }}" aria-hidden="true"></i>
								<span>{{ tab.label }}</span>
							</button>
						</li>
					{% endfor %}
				</ul>

				<div class="tab-content import-export-panels">
					{% for tab in vars.import_export_tabs %}
						<div class="tab-pane fade{% if tab.is_active %} show active{% endif %}"
							 id="{{ tab.panel_id }}"
							 data-import-export-panel="{{ tab.key }}"
							 role="tabpanel"
							 aria-labelledby="{{ tab.tab_id }}">
							{% if not tab.is_available %}
								{% include '/wpadmin/components/feature_unavailable.twig' with {
									feature: { title: tab.label, icon_class: tab.icon_class, summary: tab.summary }
								} %}
							{% elseif tab.key == 'file' %}
								{% include '/wpadmin_pages/insights/importexport/file_transfer.twig' with { file_transfer: vars.file_transfer } only %}
							{% elseif tab.key == 'network_sync' %}
								{% include '/wpadmin_pages/insights/importexport/network_sync.twig' with {
									network_sync: vars.network_sync
								} only %}
							{% endif %}
						</div>
					{% endfor %}
				</div>
			{% endif %}
		</div>
	{% else %}
		<div class="row">
			<div class="col-12 insights_section">
				{% include '/wpadmin/components/feature_unavailable.twig' with { feature: vars.upgrade_feature } %}
			</div>
		</div>
	{% endif %}

{% endblock %}