{% comment %}
 # -----------------------------------------------------------------------------
 # ~/_includes/themes/j1/procedures/blocks/get_wave.proc
 # Liquid PROCEDURE to generate the HTML portion of a wave element
 # applied to J1 block elements (like footers, banners and panels).
 #
 # https://jekyll.one
 # Copyright (C) 2023 Juergen Adams
 #
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
 #
 # -----------------------------------------------------------------------------
 #  Global procedure. Read RGB category values from j1_categorys.yml and returns
 #  the category found with liquid var category
 #
 #   Usage:
 #     1)  load (capture) the procedure 'get_wave.proc'
 #     2)  reference (include) the procedure 'get_wave.proc'
 #     3)  assign the 'wave' variable to (hash) data the wave element is
 #         defined.
 #     4)  finally, assign the resulting HTML data (for output)
 #
 #  Example:
 #
 #  {% capture get_wave %}themes/{{site.template.name}}/procedures/blocks/get_wave.proc{% endcapture %}
 #
 #  {% include {{get_wave}} wave=footer_settings.wave %}
 #  {% assign my_wave = {{_wave}} %}
 #
 # -----------------------------------------------------------------------------
 # Test data:
 #  {{ liquid_var | debug }}
 #  category:  {{ item[0] }}: {{ item[1] }}
 # -----------------------------------------------------------------------------
{% endcomment %}

{% comment %} Variables
-------------------------------------------------------------------------------- {% endcomment %}
{% assign position      = include.position %}
{% assign wave_settings = include.wave %}
{% assign _wave         = nil %}


{% comment %} Main
-------------------------------------------------------------------------------- {% endcomment %}


{% comment %} Calculate|Set WAVE scales
TODO: Check why corrections of plus:1 or minus:1 are required
--------------------------------------------------------------------------------
{% if wave_height > 1 %}
  {% if position == 'top' %}
    {% assign translate_y     = wave_height|times:-2|plus:1 %}
    {% assign position_class  = 'wave-top' %}
  {% elsif position == 'bottom' %}
    {% assign translate_y     = wave_height|times:2|minus:1 %}
    {% assign position_class  = 'wave-bottom' %}
  {% else %}
    {% assign translate_y = 1 %}
  {% endif %}
{% endif %}
-------------------------------------------------------------------------------- {% endcomment %}


{% comment %} Calculate|Set WAVE scales
-------------------------------------------------------------------------------- {% endcomment %}
{% assign wave_height         = wave_settings.height %}
{% assign wave_height_factor  = wave_settings.height|plus:1 %}
{% assign min-height          = wave_height|times:10|plus:100 %}
{% assign padding-value       = wave_height|times:10 %}

{% capture padding %}{{padding-value}}px{% endcapture %}

{% comment %} Disabled translate_y (scale wave)
-------------------------------------------------------------------------------- {% endcomment %}
{% if wave_height > 1 %}
  {% if position == 'top' %}
    {% assign translate_y     = 0 %}
    {% assign position_class  = 'wave-top' %}
  {% elsif position == 'bottom' %}
    {% assign translate_y     = 0 %}
    {% assign position_class  = 'wave-bottom' %}
  {% else %}
    {% assign translate_y     = 0 %}
  {% endif %}
{% endif %}

{% if wave_height > 1 %}
  {% capture scale %}translate(0,{{translate_y}}) scale(1,1.{{wave_height}}){% endcapture %}
{% else %}
  {% capture scale %}scale(1,1){% endcapture %}
{% endif %}

{% if wave_settings.background_color == 'auto' %}
  {% assign wave_background_color = 'var(--bs-body-bg)' %}
{% else %}
  {% assign wave_background_color = wave_settings.background_color %}
{% endif %}



{% comment %} Set WAVE transformations
-------------------------------------------------------------------------------- {% endcomment %}
{% assign wave_transforms = wave_settings.transform|normalize_whitespace|split:' ' %}

{% assign wave_transform = '' %}
{% assign transform_filters = '' %}

{% for item in wave_transforms %}
  {% if item == 'rotate' %}
    {% capture wave_transform %}rotate(180){% endcapture %}
  {% elsif item == 'flip-x' %}
    {% capture wave_transform %}scale(1,-1){% endcapture %}
  {% elsif item == 'flip-y' %}
    {% capture wave_transform %}scale(-1,1){% endcapture %}
  {% else %}
    {% capture wave_transform %}{% endcapture %}
  {% endif %}

  {% capture transform_filters %}{{transform_filters}} {{wave_transform}}{% endcapture %}
{% endfor %}

{% capture wave_transform %}transform="{{transform_filters}}"{% endcapture %}


{% comment %} Set WAVE styles
-------------------------------------------------------------------------------- {% endcomment %}
{% case wave_settings.style %}
  {% when 'wave-1' %}
  {% capture wave %}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1440 100"
    transform="{{scale}}{{transform_filters}}">
    <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="m 0,71.532704 h 106.6938 c 106.6938,0 320.08137,0 533.46898,-18.948546 C 853.55038,33.279773 1066.938,-4.0835522 1280.3256,0.36446289 1493.7131,4.8124779 1707.1007,52.851042 1813.7945,76.2476 L 1920.4883,100 v 0 h -106.6938 c -106.6938,0 -320.0814,0 -533.4689,0 -213.3876,0 -426.77522,0 -640.16282,0 -213.38761,0 -426.77518,0 -533.46898,0 H 0 Z"
    >
  >
  {% endcapture %}

  {% when 'wave-2' %}
  {% capture wave %}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1440 100"
    transform="{{scale}}{{transform_filters}}">
    <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="M 0,13.637791 160,8.8698767 C 320.00001,3.7421199 640.00002,-5.2539441 960.00004,4.0120013 1280,13.637791 1600.0001,42.425196 1760.0001,56.8189 L 1920,71.212604 V 100 h -159.9999 c -160,0 -480.0001,0 -800.00006,0 -320.00002,0 -640.00003,0 -800.00003,0 H 0 Z"
    >
  >
  {% endcapture %}

  {% when 'wave-3' %}
  {% capture wave %}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1440 100"
    transform="{{scale}}{{transform_filters}}">
    <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="m 0,0 160,11.111108 c 160,11.111113 480,33.333338 800,46.284725 320,13.09028 640.0001,16.5625 800,18.541667 l 160,1.840279 V 100 h -160 c -159.9999,0 -480,0 -800,0 -320,0 -640,0 -800,0 H 0 Z"
    >
  >
  {% endcapture %}

  {% when 'wave-4' %}
  {% capture wave %}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    transform: rotate(180deg)
    viewBox="0 0 1440 100"
    transform="{{scale}}{{transform_filters}}">
    <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="m 1920,55.555554 -160,7.395833 C 1600.0001,70.486113 1280,85.069446 960,75.9375 640,66.666667 319.99995,33.333333 160.00005,16.666667 L 0,0 V 100 H 160.00005 C 319.99995,100 640,100 960,100 c 320,0 640.0001,0 800,0 h 160 z"
    >
  >
  {% endcapture %}

  {% when 'wave-5' %}
  {% capture wave %}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    transform: rotate(180deg)
    viewBox="0 0 1440 100"
    transform="{{scale}}{{transform_filters}}">
    <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="m 0,1.3320719 h 45.733333 c 45.733334,0 136.933337,0 228.933337,14.6712151 C 365.73333,30.831835 457.33333,59.938267 548,64.264899 640,68.591531 732,47.351702 822.66666,32.798486 914.26667,18.245269 1005.3333,9.5920056 1097.3333,7.6253547 1188.5333,5.6587039 1280,9.5920056 1372,26.505203 1462.8,43.4184 1554.6666,72.524833 1645.3334,81.060098 1737.2,89.43803 1828,76.851465 1874.6666,70.558182 L 1920,64.264899 V 102.0246 h -45.7333 c -45.7334,0 -136.9333,0 -228.9333,0 -91.0667,0 -182.6668,0 -273.3334,0 -92,0 -184,0 -274.6667,0 -91.6,0 -182.66663,0 -274.66664,0 -91.19999,0 -182.66666,0 -274.66666,0 -90.8,0 -182.66667,0 -273.33333,0 -91.86667,0 -182.66667,0 -229.333337,0 H 0 Z"
    >
  >
  {% endcapture %}

  {% else %}
  {% capture wave %}
  <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1440 100">
     <path
       fill="{{wave_settings.color}}"
       fill-opacity="1"
       d="m 0,71.532704 h 71.111114 c 71.111116,0 213.333326,0 355.555566,-18.948546 C 568.88891,33.279773 711.11114,-4.0835522 853.33336,0.36446289 995.55556,4.8124779 1137.7778,52.851042 1208.8889,76.2476 L 1280,100 v 0 h -71.1111 c -71.1111,0 -213.33334,0 -355.55554,0 -142.22222,0 -284.44445,0 -426.66668,0 -142.22224,0 -284.44445,0 -355.555566,0 H 0 Z"
     >
  >
  {% endcapture %}

{% endcase %}

{% comment %} Generate WAVE container
TODO: Check why corrections of margin-top:-1 or margin-bottom:-1 are required
{% capture _wave %}<div class="wavebox" style="background-color: {{wave_settings.background_color}}; margin-top: -1px; margin-bottom: -1px;">{{wave}}</div>{% endcapture %}
{% capture _wave %}<div class="wavebox" style="background-color: var(--bs-body-bg); margin-top: -1px; margin-bottom: -1px;">{{wave}}</div>{% endcapture %}
-------------------------------------------------------------------------------- {% endcomment %}
{% if position == 'top' %}
  {% capture _wave %}<div class="wave wave-top" style="padding-top: {{padding}}; background-color: {{wave_background_color}}; margin-top: -1px; margin-bottom: -1px;">{{wave}}</div>{% endcapture %}
{% else %}
  {% capture _wave %}<div class="wave wave-bottom" style="padding-bottom: {{padding}}; background-color: {{wave_background_color}}; margin-top: -1px; margin-bottom: -1px;">{{wave}}</div>{% endcapture %}
{% endif %}