ai_upgrade_assistant-0.2.0-alpha2/templates/upgrade-path.html.twig

{#
/**
 * @file
 * Default theme implementation to display an upgrade path.
 *
 * Available variables:
 * - module: The module name.
 * - path: The upgrade path data.
 */
#}
<div class="upgrade-path-wrapper">
  <div class="upgrade-path-header">
    <h2>{{ 'Upgrade Path for @module'|t({'@module': module}) }}</h2>
    <div class="upgrade-path-summary">
      <div class="version-info">
        <span class="current-version">{{ 'Current Version:'|t }} {{ path.current_version }}</span>
        <span class="target-version">{{ 'Target Version:'|t }} {{ path.target_version }}</span>
      </div>
      <div class="path-meta">
        <div class="confidence-score">
          {{ 'Confidence Score:'|t }} {{ (path.metadata.confidence_score * 100)|round }}%
        </div>
        <div class="estimated-effort">
          {{ 'Estimated Effort:'|t }} {{ path.estimated_effort }} {{ 'points'|t }}
        </div>
      </div>
    </div>
  </div>

  <div class="upgrade-path-navigation">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a href="#steps" class="nav-link active" data-toggle="tab">{{ 'Steps'|t }}</a>
      </li>
      <li class="nav-item">
        <a href="#risks" class="nav-link" data-toggle="tab">{{ 'Risks'|t }}</a>
      </li>
      <li class="nav-item">
        <a href="#dependencies" class="nav-link" data-toggle="tab">{{ 'Dependencies'|t }}</a>
      </li>
    </ul>
  </div>

  <div class="tab-content">
    <div id="steps" class="tab-pane active">
      <div class="upgrade-steps">
        {% for step in path.steps %}
          <div class="upgrade-step {{ step.type }}" data-step-id="{{ step.id }}">
            <div class="step-header">
              <span class="step-type">{{ step.type|replace({'_': ' '})|title }}</span>
              {% if step.automated %}
                <span class="badge badge-success">{{ 'Automated'|t }}</span>
              {% endif %}
              {% if step.confidence %}
                <span class="confidence-indicator" title="{{ 'Confidence: @score%'|t({'@score': (step.confidence * 100)|round}) }}">
                  {{ (step.confidence * 100)|round }}%
                </span>
              {% endif %}
            </div>
            <div class="step-content">
              <h4>{{ step.description }}</h4>
              {% if step.details %}
                <div class="step-details">{{ step.details }}</div>
              {% endif %}
            </div>
            <div class="step-actions">
              <a href="{{ path('ai_upgrade_assistant.upgrade_path_step', {'module': module, 'step': step.id}) }}" class="button">
                {{ 'View Details'|t }}
              </a>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

    <div id="risks" class="tab-pane">
      <div class="risk-assessment">
        {% for risk in path.risks %}
          <div class="risk-item risk-{{ risk.level }}">
            <div class="risk-header">
              <span class="risk-level">{{ risk.level|title }}</span>
              <span class="risk-effort">{{ 'Effort:'|t }} {{ risk.effort }}</span>
            </div>
            <div class="risk-content">
              <h4>{{ risk.step }}</h4>
              {% if risk.mitigation %}
                <div class="risk-mitigation">
                  <h5>{{ 'Mitigation Steps:'|t }}</h5>
                  <ul>
                    {% for step in risk.mitigation %}
                      <li>{{ step }}</li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

    <div id="dependencies" class="tab-pane">
      <div class="dependencies-overview">
        {% if path.dependencies.required %}
          <div class="required-dependencies">
            <h3>{{ 'Required Dependencies'|t }}</h3>
            <ul>
              {% for dep in path.dependencies.required %}
                <li>
                  {{ dep.name }}
                  {% if dep.constraint %}
                    <span class="version-constraint">({{ dep.constraint }})</span>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if path.dependencies.optional %}
          <div class="optional-dependencies">
            <h3>{{ 'Optional Dependencies'|t }}</h3>
            <ul>
              {% for dep in path.dependencies.optional %}
                <li>
                  {{ dep.name }}
                  {% if dep.constraint %}
                    <span class="version-constraint">({{ dep.constraint }})</span>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="upgrade-path-actions">
    <a href="{{ path('ai_upgrade_assistant.upgrade_path_interactive', {'module': module}) }}" class="button button--primary">
      {{ 'Interactive View'|t }}
    </a>
    <div class="dropdown">
      <button class="button dropdown-toggle" type="button" id="exportDropdown" data-toggle="dropdown">
        {{ 'Export'|t }}
      </button>
      <div class="dropdown-menu" aria-labelledby="exportDropdown">
        <a class="dropdown-item" href="{{ path('ai_upgrade_assistant.upgrade_path_export', {'module': module, 'format': 'json'}) }}">
          {{ 'JSON'|t }}
        </a>
        <a class="dropdown-item" href="{{ path('ai_upgrade_assistant.upgrade_path_export', {'module': module, 'format': 'html'}) }}">
          {{ 'HTML Report'|t }}
        </a>
      </div>
    </div>
  </div>
</div>