ai_upgrade_assistant-0.2.0-alpha2/templates/ai-upgrade-assistant-config.html.twig

{#
/**
 * @file
 * Template for the AI Upgrade Assistant configuration page.
 *
 * Available variables:
 * - form: The configuration form.
 */
#}

{% extends "ai-upgrade-base.html.twig" %}

{% block content %}
  <div class="ai-config-page">
    {# Hero Section #}
    <div class="ai-hero">
      <div class="ai-hero__content">
        <h1 class="ai-hero__title">{{ 'AI Upgrade Assistant Settings'|t }}</h1>
        <p class="ai-hero__description">{{ 'Configure your AI-powered upgrade experience'|t }}</p>
      </div>
    </div>

    {# Configuration Cards #}
    <div class="ai-config-grid">
      {# API Settings Card #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">key</span>
          <h2>{{ 'API Configuration'|t }}</h2>
        </div>
        <div class="ai-card__content">
          {{ form.api_settings }}
        </div>
      </div>

      {# Analysis Settings Card #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">tune</span>
          <h2>{{ 'Analysis Settings'|t }}</h2>
        </div>
        <div class="ai-card__content">
          {{ form.analysis_settings }}
        </div>
      </div>

      {# Privacy Settings Card #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">security</span>
          <h2>{{ 'Privacy Settings'|t }}</h2>
        </div>
        <div class="ai-card__content">
          {{ form.privacy_settings }}
        </div>
      </div>

      {# Advanced Settings Card #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">code</span>
          <h2>{{ 'Advanced Settings'|t }}</h2>
        </div>
        <div class="ai-card__content">
          {{ form.advanced_settings }}
        </div>
      </div>
    </div>

    {# Form Actions #}
    <div class="ai-form-actions">
      {{ form.actions }}
    </div>

    {# Help Section #}
    <div class="ai-help-section">
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">help_outline</span>
          <h2>{{ 'Need Help?'|t }}</h2>
        </div>
        <div class="ai-card__content">
          <p>{{ 'For detailed instructions and troubleshooting, visit our documentation:'|t }}</p>
          <a href="https://www.drupal.org/docs/contributed-modules/ai-upgrade-assistant" class="ai-button ai-button--secondary">
            <span class="material-icons">book</span>
            {{ 'View Documentation'|t }}
          </a>
        </div>
      </div>
    </div>

    {# Hidden Elements #}
    <div class="ai-hidden-elements">
      {{ form|without('api_settings', 'analysis_settings', 'privacy_settings', 'advanced_settings', 'actions') }}
    </div>
  </div>
{% endblock %}