{{  attach_library('kamihaya_cms_ai/kamihaya_ai') }}

{% set class = [
  'kamihaya-ai-container',
  background ? 'bg-' ~ background,
] %}

{# Kamihaya AI Container #}
<div{{ attributes.addClass(class) }}>
  {% if background == 'image' and bg_image %}
    <div class="image-bg">
      <img src="{{ bg_image }}" alt="{{ image_alt }}">
    </div>
  {% elseif background == 'video' %}
    <div class="video-bg">
      <video autoplay loop muted playsinline>
        <source src="{{ bg_video }}" type="video/mp4">
      </video>
    </div>
  {% else %}
    <div class="gradient-bg">
      <div class="gradient-bg__holder">
        <div class="gradient-bg__item gradient-bg__item--1"></div>
        <div class="gradient-bg__item gradient-bg__item--2"></div>
      </div>
    </div>
  {% endif %}
  {% if header %}
    <div class="kamihaya-ai-container-header">
      {{ header }}
    </div>
  {% endif %}
  {% if sidebar_left %}
    <div class="sidebar-left">
      {{ sidebar_left }}
    </div>
  {% endif %}
  <div class="kamihaya-ai-container-main">
    {% set current_step = current_step is defined ? current_step : 'summarize' %}
    <input type="hidden" id="current-step" value="{{ current_step }}">
    <div class="chat-block">
      <div class="chat-block-body">
        <div class="chat-block-body-scroll">
          <div class="chat-block-body-content">
            {% if process_form %}
              <div class="chat-block-body-process-form">
                {{ process_form }}
              </div>
            {% endif %}
          </div>
          {% if chat_body %}
            <div class="chat-block-body-content-main {% if process_form %} hidden{% endif %}">
              {{ chat_body }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% if process %}
    <div id="process-block" class="process-block process-block--hidden">
      <div class="process-block-content">
        {% if steps %}
          {% for key,step in steps %}
            {% if step.process_image %}
              <div class="process-block-item hidden" id="process-{{ key|replace({'_': '-'}) }}">
                <img src="{{ step.process_image }}" alt="{{ key}} process image">
              </div>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>
    </div>
  {% endif %}

    {% if steps %}
      {% set disp_steps = steps | filter((v, k) => v.name) %}
      <div class="results-block-header-container hidden">
        <ul class="results-block-header{% if step_design %} step-design-{{ step_design }}{% endif %}">
          {% set idx = 0 %}
          {% for key,step in disp_steps %}
            {% set idx = idx + 1 %}
            <li class="results-block-header-item step-{{ key|replace({'_': '-'}) }}" role="presentation">
              <a href="#step-body-{{ key|replace({'_': '-'}) }}" class="disabled"><span>{{ step.name }}</span></a>
            </li>
            {% if step_design == 'slider' and idx < disp_steps|length %}
              <span class="results-block-header-item step-arrow"></span>
            {% endif %}
          {% endfor %}
        </ul>
        <ul class="results-block-header-history hidden"></ul>
        {% if process %}
          <div class="process-result-switcher hidden">
            <div class="process-result-switcher-item">
              <a class="process-result-switcher-item-link disabled" href="#results-block">
                <img src="/profiles/contrib/kamihaya_cms/modules/kamihaya_cms_ai/assets/images/result-icon-max.png" class="maximized-image" alt="{{ 'Result(maximized)'|t }}">
                <img src="/profiles/contrib/kamihaya_cms/modules/kamihaya_cms_ai/assets/images/result-icon-min.png" class="minimized-image hidden" alt="{{ 'Result(mainimized)'|t }}">
              </a>
            </div>
            <div class="process-result-switcher-item">
              <a class="process-result-switcher-item-link" href="#process-block">
                <img src="/profiles/contrib/kamihaya_cms/modules/kamihaya_cms_ai/assets/images/process-icon-max.png" class="maximized-image hidden" alt="{{ 'Process(maximized)'|t }}">
                <img src="/profiles/contrib/kamihaya_cms/modules/kamihaya_cms_ai/assets/images/process-icon-min.png" class="minimized-image" alt="{{ 'Process(miinimized)'|t }}">
              </a>
            </div>
          </div>
        {% endif %}
      </div>
      <div id="results-block" class="results-block{% if hide_result %} results-block--hidden{% endif %}">
        <div id="results-block-body" class="results-block-body">
          {% if disp_steps %}
            {% for key,step in disp_steps %}
              <div class="results-block-body-item" id="step-body-{{ key|replace({'_': '-'}) }}">
                {% if step.wait_movie %}
                  <div class="results-block-body-item-movie">
                    <video loop muted playsinline>
                      <source src="{{ step.wait_movie }}" type="video/mp4">
                    </video>
                    {% if stoppable %}
                      <div class="results-block-body-item-stop">
                        <button class="btn btn-primary button--small btn-stop">{{ 'Suspend'|t }}</button>
                      </div>
                    {% endif %}
                  </div>
                {% endif %}
                {{ step.body }}
              </div>
            {% endfor %}
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
  <div class="history-block hidden">
    <div class="history-block-header">
      <div class="history-block-header-close">
        <a href="#" class="history-close" aria-label="{{ 'Close'|t }}">
          <span class="visually-hidden">{{ 'Close'|t }}</span>
        </a>
      </div>
    </div>
    <div class="history-block-body"></div>
  </div>
  {% if edit_prompt %}
    <div class="edit-prompt hidden">
      <div class="edit-prompt-header">
        <div class="edit-prompt-header-title">
          {{ 'Check Prompt'|t }}
        </div>
        <div class="edit-prompt-header-close">
          <a href="#" class="prompt-close" aria-label="{{ 'Close'|t }}">
            <span class="visually-hidden">{{ 'Close'|t }}</span>
          </a>
        </div>
      </div>
      <div class="edit-prompt-buttons">
        <ul class="edit-prompt-buttons-list hidden"></ul>
      </div>
      <div class="edit-prompt-body">
        <div class="edit-prompt-body-content">
        </div>
        <div class="edit-prompt-body-buttons">
          <button class="btn btn-secondary button--small btn-edit-prompt">{{ 'Edit Prompt'|t }}</button>
          <button class="btn btn-primary button--small btn-edit-prompt-cancel">{{ 'Cancel'|t }}</button>
      </div>
    </div>
  {% endif %}
  {% if sidebar_bottom %}
    <div class="sidebar-bottom">
      {{ sidebar_bottom }}
    </div>
  {% endif %}
  {% if sidebar_right %}
    <div class="sidebar-right">
      {{ sidebar_right }}
    </div>
  {% endif %}
    {% if second_mode %}
      <div class="second-mode-switch">
        <label for="second-mode-switch">{{ second_mode_name }}</label>
        <input type="checkbox" id="second-mode-switch" class="second-mode-switch">
      </div>
    {% endif %}
  </div>
</div>
