{#
/**
 * @file
 * Template for the overview page with setup guides, video tutorial, and tabs.
 *
 * Available variables:
 * - tabs: Array of tab information including title, description, url, and status.
 * - guides: An array of setup guide information (optional).
 * - all_guides_url: URL to view all setup guides (optional).
 * - video_id: YouTube video ID (optional).
 * - video_title: Title of the video (optional).
 * - video_description: Description of the video (optional).
 * - youtube_url: Full YouTube URL (optional).
 */
#}

{# Setup Guides and Video Tutorial Sections - Side by Side #}
{% if (guides is defined and guides is not empty) or (video_id is defined and video_id is not empty) %}
<div class="mo-overview-sections-container">
  {# Setup Guides Section - Simple Card #}
  {% if guides is defined and guides is not empty %}
  <div class="mo-setup-guides-section">
    <h2 class="mo-section-title">Setup Guides</h2>
    <p class="mo-section-description">Get started quickly with our comprehensive setup guides for different SCIM providers.</p>
    
    <div class="mo-setup-guides-simple-card">
      <div class="mo-guide-content">
        <h3>Complete Setup Documentation</h3>
        <p class="mo-section-description">Learn how to configure user provisioning with Azure AD, Okta, AWS SSO, and custom applications. Our step-by-step guides will help you get started in minutes.</p>
        <a href="{{ all_guides_url }}" target="_blank" class="button button--primary setup-guide-btn">View Setup Guides</a>
      </div>
    </div>
  </div>
  {% endif %}

  {# Video Tutorial Section #}
  {% if video_id is defined and video_id is not empty %}
  <div class="mo-video-tutorial-section">
    <h2 class="mo-section-title">Video Tutorial</h2>
    <p class="mo-section-description">Watch our step-by-step video guide to get started with User Provisioning.</p>

    <div class="mo-video-simple-card">
      <iframe 
        src="https://www.youtube.com/embed/{{ video_id }}" 
        title="{{ video_title|default('User Provisioning Setup Tutorial') }}"
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
      </iframe>
    </div>
  </div>
  {% endif %}
</div>
{% endif %}

{# Main Overview Tabs #}
<div class="mo-overview-tabs">
  {% for tab in tabs %}
    <div class="mo-overview-tab{% if tab.current %} mo-overview-current{% endif %}">
      <h3>{{ tab.title }}</h3>
      <p class="mo-section-description">{{ tab.description }}</p>
      <a href="{{ tab.url }}" class="button button--primary">{{ tab.action }}</a>
    </div>
  {% endfor %}
</div>
