ai_upgrade_assistant-0.2.0-alpha2/templates/analysis-report.html.twig

{#
/**
 * @file
 * Modern theme implementation for analysis report.
 *
 * Available variables:
 * - data: The report data.
 * - base_path: The base path of the site.
 */
#}

<div class="ai-upgrade-container">
  <header class="ai-header">
    <div class="ai-card">
      <div class="ai-card__header">
        <span class="material-icons">rocket_launch</span>
        <div>
          <h1 class="ai-header__title">{{ 'AI-Powered Upgrade Analysis'|t }}</h1>
          <p class="ai-header__description">
            {{ 'Generated on'|t }}: {{ data.generated_on }} | 
            {{ 'Drupal Version'|t }}: {{ data.drupal_version }}
          </p>
        </div>
        {% if data.overall_status == 'success' %}
          <div class="ai-status-label ai-status-label--success">
            <span class="material-icons">check_circle</span>
            {{ 'Ready to Upgrade'|t }}
          </div>
        {% endif %}
      </div>
    </div>
  </header>

  {# Fun Interactive Tabs #}
  <div class="ai-tabs">
    <a href="#overview" class="ai-tabs__item ai-tabs__item--active">
      <span class="material-icons">dashboard</span>
      {{ 'Overview'|t }}
    </a>
    <a href="#modules" class="ai-tabs__item">
      <span class="material-icons">extension</span>
      {{ 'Modules'|t }}
    </a>
    <a href="#issues" class="ai-tabs__item">
      <span class="material-icons">bug_report</span>
      {{ 'Issues'|t }}
    </a>
    <a href="#security" class="ai-tabs__item">
      <span class="material-icons">security</span>
      {{ 'Security'|t }}
    </a>
  </div>

  {# Overview Section with Fun Stats #}
  <section id="overview" class="ai-upgrade-grid">
    {# Summary Stats Card #}
    <div class="ai-card {% if data.critical_issues > 0 %}ai-card--highlight{% endif %}">
      <div class="ai-card__header">
        <span class="material-icons">analytics</span>
        {{ 'Analysis Summary'|t }}
      </div>
      
      <div class="ai-grid-stats">
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Total Modules'|t }}</span>
          <span class="ai-stat-value">{{ data.total_modules }}</span>
        </div>
        
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Issues Found'|t }}</span>
          <span class="ai-stat-value">{{ data.total_issues }}</span>
        </div>
        
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Critical Issues'|t }}</span>
          <span class="ai-stat-value">{{ data.critical_issues }}</span>
        </div>
        
        <div class="ai-stat-item">
          <span class="ai-stat-label">{{ 'Compatibility'|t }}</span>
          <div class="ai-progress">
            <div class="ai-progress__bar" style="width: {{ data.compatibility_score }}%"></div>
          </div>
          <span class="ai-stat-value">{{ data.compatibility_score }}%</span>
        </div>
      </div>
    </div>

    {# Quick Summary Card with AI Insights #}
    <div class="ai-card">
      <div class="ai-card__header">
        <span class="material-icons">psychology</span>
        {{ 'AI Insights'|t }}
      </div>
      
      <div class="ai-message ai-message--{{ data.overall_status }}">
        <span class="material-icons">
          {% if data.overall_status == 'success' %}check_circle
          {% elseif data.overall_status == 'warning' %}warning
          {% else %}error{% endif %}
        </span>
        <div>
          <strong>{{ data.summary_title }}</strong>
          <p>{{ data.summary_message }}</p>
        </div>
      </div>
    </div>
  </section>

  {# Modules Section with Interactive Cards #}
  <section id="modules" class="ai-upgrade-grid">
    {% for module in data.modules %}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">extension</span>
          {{ module.name }}
          <span class="ai-status-label ai-status-label--{{ module.status }}">
            {{ module.status|title }}
          </span>
        </div>
        
        <div class="ai-module-info">
          <p>{{ module.description }}</p>
          
          {% if module.issues %}
            <div class="ai-module-issues">
              {% for issue in module.issues %}
                <div class="ai-message ai-message--{{ issue.severity }}">
                  <span class="material-icons">
                    {% if issue.severity == 'error' %}error
                    {% elseif issue.severity == 'warning' %}warning
                    {% else %}info{% endif %}
                  </span>
                  <div>
                    <strong>{{ issue.title }}</strong>
                    <p>{{ issue.description }}</p>
                    {% if issue.code %}
                      <div class="ai-code">{{ issue.code }}</div>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </section>

  {# Advanced Developer Options #}
  <div class="ai-advanced-options">
    <div class="ai-advanced-options__header" onclick="this.nextElementSibling.classList.toggle('is-expanded')">
      <span class="material-icons">code</span>
      {{ 'Advanced Developer Options'|t }}
      <span class="material-icons" style="margin-left: auto">expand_more</span>
    </div>
    
    <div class="ai-advanced-options__content">
      {# Dependency Analysis #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">account_tree</span>
          {{ 'Dependency Analysis'|t }}
        </div>
        
        <div class="ai-grid-stats">
          {% for dep in data.dependencies %}
            <div class="ai-stat-item">
              <span class="ai-stat-label">{{ dep.name }}</span>
              <span class="ai-stat-value">{{ dep.version }}</span>
            </div>
          {% endfor %}
        </div>
      </div>

      {# Performance Metrics #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">speed</span>
          {{ 'Performance Impact'|t }}
        </div>
        
        <div class="ai-grid-stats">
          <div class="ai-stat-item">
            <span class="ai-stat-label">{{ 'Memory Usage'|t }}</span>
            <div class="ai-progress">
              <div class="ai-progress__bar" style="width: {{ data.performance.memory_usage }}%"></div>
            </div>
          </div>
          
          <div class="ai-stat-item">
            <span class="ai-stat-label">{{ 'Cache Impact'|t }}</span>
            <div class="ai-progress">
              <div class="ai-progress__bar" style="width: {{ data.performance.cache_impact }}%"></div>
            </div>
          </div>
        </div>
      </div>

      {# Technical Details #}
      <div class="ai-card">
        <div class="ai-card__header">
          <span class="material-icons">terminal</span>
          {{ 'Technical Details'|t }}
        </div>
        
        <div class="ai-code">
          {{ data.technical_details|raw }}
        </div>
      </div>
    </div>
  </div>
</div>

{# Add Material Icons #}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

{# Add Interactive JavaScript #}
<script>
  // Tab Navigation
  document.querySelectorAll('.ai-tabs__item').forEach(tab => {
    tab.addEventListener('click', (e) => {
      e.preventDefault();
      document.querySelectorAll('.ai-tabs__item').forEach(t => t.classList.remove('ai-tabs__item--active'));
      tab.classList.add('ai-tabs__item--active');
      
      const targetId = tab.getAttribute('href').substring(1);
      document.querySelectorAll('section').forEach(s => s.style.display = 'none');
      document.getElementById(targetId).style.display = 'grid';
    });
  });

  // Card Animations
  document.querySelectorAll('.ai-card').forEach(card => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }
      });
    });
    
    observer.observe(card);
  });
</script>

<style>
  /* Animation Styles */
  .ai-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
</style>