---
regenerate:                             true
exclude_from_search:                    true
---
{% capture cache %}

{% comment %}
 # -----------------------------------------------------------------------------
 # ~/assets/data/panel.html
 # Liquid procedure to generate HTML (data) for all panel configured for
 # (fragmented) AJAX load
 #
 # Product/Info:
 # https://jekyll.one
 #
 # Copyright (C) 2023 Juergen Adams
 #
 # J1 Theme is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
 # -----------------------------------------------------------------------------
 # Test data:
 #    {{ variable | debug }}
 # -----------------------------------------------------------------------------
{% endcomment %}

{% comment %} Liquid procedures
-------------------------------------------------------------------------------- {% endcomment %}
{% capture get_wave           %}themes/{{site.template.name}}/procedures/blocks/get_wave.proc{% endcapture %}

{% capture select_color       %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
{% capture select_icon_size   %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
{% capture create_bs_button   %}themes/{{site.template.name}}/procedures/global/create_bs_button.proc{% endcapture %}
{% capture news_box           %}themes/{{site.template.name}}/modules/footers/boxes/news_box.proc{% endcapture %}

{% comment %} Set config files
-------------------------------------------------------------------------------- {% endcomment %}

{% comment %} Set global settings
-------------------------------------------------------------------------------- {% endcomment %}
{% assign environment = site.environment %}
{% assign debug       = false %}

{% comment %} Process YML config data
================================================================================ {% endcomment %}

{% comment %} Set config files
-------------------------------------------------------------------------------- {% endcomment %}
{% assign template_config           = site.data.j1_config %}
{% assign blocks                    = site.data.blocks %}
{% assign panel_config_defaults     = blocks.defaults.panel %}
{% assign panel_config_settings     = blocks.panel %}
{% assign bs_config                 = template_config.bootstrap %}

{% comment %} Set config data
-------------------------------------------------------------------------------- {% endcomment %}
{% assign panel_config_defaults     = panel_config_defaults.defaults %}
{% assign panel_config_settings     = panel_config_settings.settings %}
{% assign bs_card_deck              = bs_config.cards.card_deck %}

{% comment %} Set config options
-------------------------------------------------------------------------------- {% endcomment %}
{% assign panel_config_options      = panel_config_defaults | merge: panel_config_settings %}

{% comment %} Variables
-------------------------------------------------------------------------------- {% endcomment %}
{% assign truncate_words            = site.excerpt_truncate_words %}
{% assign category_blacklist        = template_config.posts.category_blacklist %}

{% comment %} Set HELPER variables (used by exception panel)
-------------------------------------------------------------------------------- {% endcomment %}
{% capture panel_config_file_name %}~/_data/blocks/panel.yml{% endcapture %}


{% comment %} Collect CSS image filters
-------------------------------------------------------------------------------- {% endcomment %}
{% if panel_config_options.filters %}
  {% for filter in panel_config_options.filters %}
    {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
  {% endfor %}
  {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
{% else %}
  {% assign image_filters = '' %}
{% endif %}

{% comment %} language detection|i18n
-------------------------------------------------------------------------------- {% endcomment %}
{% if site.language == "en" %}
  {% assign language = "en" %}
{% elsif site.language == "de"%}
  {% assign language = "de" %}
{% else %}
  {% assign language = "en" %}
{% endif %}

{% if language == "en" %}
  {% assign readmore_text = "read" %}
  {% assign infinite_scroll_last = "More articles can be found with the" %}
{% endif %}

{% if language == "de" %}
  {% assign readmore_text = "lesen" %}
  {% assign infinite_scroll_last = "Weitere Artikel finden Sie im" %}
{% endif %}

{% comment %} Detect prod mode
-------------------------------------------------------------------------------- {% endcomment %}
{% assign production = false %}
{% if environment == 'prod' or environment == 'production' %}
  {% assign production = true %}
{% endif %}

{% comment %} Main
================================================================================ {% endcomment %}
<!-- [INFO   ] [~/assets/data/panel.html              ] [ set meta data (robots) to exclude HTML datafiles from index ] -->
<head>
  <meta name="robots" content="noindex, nofollow" />
</head>

{% for items in panel_config_settings %}
  {% assign key             = items[0] %}
  {% assign value           = items[1] %}
  {% assign panel_config    = value %}

  {% for items in panel_config %}
    {% for panels in items %}

      {% if debug %} panels: {{ panels }} {% endif %}

      {% comment %} parse settings for MAIN keys
      -------------------------------------------------------------------------- {% endcomment %}
      {% for panel in panels %}
        {% assign data_type = panel | is_type %}
        {% if data_type == 'hash' %}
          {% assign panel_settings  = panel %}

          {% assign id                      = panel_settings.id %}
          {% assign enabled                 = panel_settings.enabled %}
          {% assign type                    = panel_settings.type %}
          {% assign icon_family             = panel_settings.icon_family | downcase %}
          {% assign style                   = panel_settings.style %}
          {% assign raised                  = panel_settings.raised %}
          {% assign lane_span               = panel_settings.lane_span %}
          {% assign title                   = panel_settings.title|strip_newlines %}
          {% assign tagline                 = panel_settings.tagline|strip_newlines %}
          {% assign buttons                 = panel_settings.buttons %}
          {% assign header                  = panel_settings.header %}
          {% assign properties              = panel_settings.properties %}
          {% assign description_properties  = panel_settings.description_properties %}
          {% assign cards                   = panel_settings.cards %}
          {% assign wave_properties         = panel_settings.wave %}
        {% endif %}
      {% endfor %}

      {% if lane_span == 'fixed' %}
        {% assign container_class = 'container' %}
      {% elsif lane_span == 'fluid' %}
        {% assign container_class = 'container-fluid' %}
      {% else %}
        {% assign container_class = 'container' %}
      {% endif %}

      {% assign row_class = 'row' %}

      {% if style == 'flat' %}
        {% assign card_style = 'card-flat' %}
      {% else %}
        {% assign card_style = '' %}
      {% endif %}

      {% if raised %}
        {% capture card_raised %}raised-z{{raised}}{% endcapture %}
      {% else %}
        {% assign card_raised = 'raised-z3' %}
      {% endif %}

      {% if icon_family == 'fontawesome' or icon_family == 'fontawesome5' or icon_family == 'fa'%}
        {% assign icon_family = 'fa' %}
      {% elsif icon_family == 'mdi' %}
        {% assign icon_family = 'mdi' %}
      {% elsif icon_family == 'iconify' %}
        {% assign icon_family = 'iconify' %}
      {% else'%}
        {% assign icon_family = 'mdi' %}
      {% endif %}

      {% comment %} generate the HTML portion for the TOP wave element
      -------------------------------------------------------------------------- {% endcomment %}
      {% if wave_properties.top.enabled %}
        {% include {{get_wave}} position="top" wave=wave_properties.top %}
        {% assign panel_wave_top = _wave %}
      {% endif %}

      {% comment %} generate the HTML portion for the BOTTOM wave element
      -------------------------------------------------------------------------- {% endcomment %}
      {% if wave_properties.bottom.enabled %}
        {% include {{get_wave}} position="bottom" wave=wave_properties.bottom %}
        {% assign panel_wave_bottom = _wave %}
      {% endif %}

      {% comment %} process current panel
      -------------------------------------------------------------------------- {% endcomment %}
      {% if panel_settings.enabled %}

        {% case panel_settings.type %}

        {% comment %} Collect INTRO panel
        ------------------------------------------------------------------------ {% endcomment %}
        {% when 'intro' %}
        {% assign panel_options = panel_config_defaults.intro | merge: panel_settings %}

        {% assign debug = true %}
        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}

        <!-- Panel {{panel_settings.id}} -->
        <section id="{{panel_settings.id}}">

          {% if wave_properties.top.enabled %}
            {{panel_wave_top}}
          {% endif %}

          <!-- Main Container -->
          <div class="container {{panel_settings.properties}}">

            <!-- Heading -->
            <div>
              <div class="{{panel_settings.animate}} mb-2">
                <h2 class="g-font-weight-500 mb-0 notranslate">{{panel_settings.title}}</h2>
                <p class="tagline mb-0"><b>{{panel_settings.tagline}}</b></p>
                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
              </div>
              <!-- Description -->
              <div class="{{description_properties}}">{{panel_settings.description}}</div>
            </div>
            <!-- End Heading -->

            <!-- Cards -->
            <div class="card-deck {{panel_settings.id}}" style="display: none;">
            {% assign card_items = cards|size %}
            {% for card in cards %}

              {% for items in card %}
                {% for item in items[1] %}
                  {% assign key   = item[0] %}
                  {% assign value = item[1] %}
                  {% if key == 'enabled' %}         {% assign card_enabled          = value %}                   {% endif %}
                  {% if key == 'type' %}            {% assign card_type             = value %}                   {% endif %}
                  {% if key == 'properties' %}      {% assign card_properties       = value %}                   {% endif %}
                  {% if key == 'icon' %}            {% assign card_icon             = value %}                   {% endif %}
                  {% if key == 'icon_size' %}       {% assign card_icon_size        = value %}                   {% endif %}
                  {% if key == 'icon_family' %}     {% assign card_icon_family      = value | downcase %}        {% endif %}
                  {% if key == 'icon_color' %}      {% assign card_icon_color       = value %}                   {% endif %}
                  {% if key == 'title' %}           {% assign card_title            = value | strip_newlines%}   {% endif %}
                  {% if key == 'title_translate' %} {% assign card_title_translate  = value %}                   {% endif %}
                  {% if key == 'tagline' %}         {% assign card_tagline          = value | strip_newlines%}   {% endif %}
                  {% if key == 'text' %}            {% assign card_text             = value | strip_newlines %}  {% endif %}
                  {% if key == 'buttons' %}         {% assign card_buttons          = value %}                   {% endif %}
                {% endfor %}
                {% if card_enabled == false %} {% assign card_items = card_items|minus:1 %} {% assign card_enabled = nil %} {% endif %}
              {% endfor %}
              {% assign col_size = 12|divided_by:card_items %}

              {% include {{select_icon_size}} family=icon_family size=icon_size %}
              {% assign icon_size = size %}

              {% comment %} extract link for card icon
              ------------------------------------------------------------------ {% endcomment %}
              {% for items in card_buttons %} {% for item in items %}
                {% if item[0] == 'button' %}
                  {% for elm in item[1] %}
                    {% assign key   = elm[0] %}
                    {% assign value = elm[1] %}
                    {% if key == 'href' %} {% assign card_href = value %} {% endif %}
                  {% endfor %}
                {% endif %}
              {% endfor %} {% endfor %}

              {% if card_type == 'text' and card_enabled %}
                {% assign card_raised = 'raised-z5' %}
                <article class="card raised-z0 mb-3">
                  <div class="card-header bg-primary pt-2 pb-2">
                    <div class="d-flex flex-row align-items-center">
                      <div class="mr-3">
                        {% if card_icon_family == 'iconify' %}
                          {% if card_icon_color == 'bg-primary' %}
                            <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} iconify-md-bg-primary" data-icon="{{card_icon}}" data-inline="false"></span>
                          {% else %}
                            <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}" data-icon="{{card_icon}}" data-inline="false"></span>
                          {% endif %}
                        {% else %}
                          <span>
                            {% if card_icon_color == 'bg-primary' %}
                              <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} mdi-md-white"></i>
                            {% else %}
                              <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}"></i>
                            {% endif %}
                          </span>
                        {% endif %}
                      </div>
                      <h3 class="m-0 {{card_title_translate}}">{{card_title}}</h3>
                    </div>
                  </div>

                  <div class="card-body g-min-height-200 r-text-300 mt-0">{{card_text}}</div>
                  <div class="card-footer r-text-200 md-grey-900 text-lowercase">
                  {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
                    {% assign key   = button[0] %}
                    {% assign value = button[1] %}
                    {% if key == 'text' %}        {% assign button_text         = value %} {% endif %}
                    {% if key == 'class' %}       {% assign button_class        = value %} {% endif %}
                    {% if key == 'icon' %}        {% assign button_icon         = value %} {% endif %}
                    {% if key == 'icon_family' %} {% assign button_icon_family  = value %} {% endif %}
                    {% if key == 'icon_color' %}  {% assign button_icon_color   = value %} {% endif %}
                    {% if key == 'icon_size' %}   {% assign button_icon_size    = value %} {% endif %}
                    {% if key == 'href' %}        {% assign button_href         = value %} {% endif %}
                    {% if key == 'target' %}      {% assign button_target       = value %} {% endif %}
                  {% endfor %} {% endfor %} {% endfor %}

                  {% if button_target == null %}
                    <a class="card-link md-grey-900" href="{{button_href}}">{{readmore_text}} · {{button_text}}</a>
                  {% else %}
                    <a class="card-link md-grey-900" href="{{button_href}}" target="{{button_target}}">{{readmore_text}} · {{button_text}}</a>
                  {% endif %}
                  </div>

                </article>
              {% endif %}

              <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
              {% assign sm = forloop.index | modulo: bs_card_deck.break_on_sm %}
              {% assign md = forloop.index | modulo: bs_card_deck.break_on_md %}
              {% assign lg = forloop.index | modulo: bs_card_deck.break_on_lg %}
              {% assign xl = forloop.index | modulo: bs_card_deck.break_on_xl %}

              <!-- Add 'column setters' for BS break points -->
              {% if sm == 0 %}
                <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
              {% endif %}

              {% if md == 0 %}
                <div class="w-100 d-none d-md-block d-lg-none"> <!-- break on md --> </div>
              {% endif %}

              {% if lg == 0 %}
                <div class="w-100 d-none d-lg-block d-xl-none"> <!-- break on lg --> </div>
              {% endif %}

              {% if xl == 0 %}
                <div class="w-100 d-none d-xl-block"> <!-- break on xl --> </div>
              {% endif %}
            {% endfor %}
            </div>
            <!-- End Cards -->
            {% comment %} END cards
            -------------------------------------------------------------------- {% endcomment %}

          </div>
          <!-- END main container -->

          {% if wave_properties.bottom.enabled %}
            {{panel_wave_bottom}}
          {% endif %}

        </section>

        <!-- END Panel {{panel_settings.id}} -->

        {% comment %} Reset element variables (already processed)
        ------------------------------------------------------------------------ {% endcomment %}
        {% assign panel_settings = nil %}
        {% assign card_enabled   = nil %}


        {% comment %} Collect PLAN panel
        ------------------------------------------------------------------------ {% endcomment %}
        {% when 'plan' %}
        {% assign panel_options = panel_config_defaults.plan | merge: panel_settings %}
        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}

        {% assign plan_details_page = panel_options.plan_details_page %}

        {% if panel_options.provider contains 'Github' %}
          {% assign provider_url = 'https://github.com/sponsors' %}
        {% else %}
          {% assign provider_url = 'https://deadlink.de/' %}
        {% endif %}

        <!-- Panel {{panel_settings.id}} -->
        <section id="{{panel_settings.id}}">

          {% if wave_properties.top.enabled %}
            {{panel_wave_top}}
          {% endif %}

          <!-- Main Container -->
          <div class="container {{panel_settings.properties}}">

            <!-- Heading -->
            <div>
              <div class="{{panel_settings.animate}} mb-2">
                <h2 class="g-font-weight-500 mb-0 {{card_title_translate}}">{{panel_settings.title}}</h2>
                <p class="tagline mb-0"><b>{{panel_settings.tagline}}</b></p>
                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
              </div>
              <!-- Description -->
              <div class="{{description_properties}}">{{panel_settings.description}}</div>
            </div>
            <!-- End Heading -->

            <!-- Cards -->
            {% comment %} calculate the number of card_items to be written
            card_items: {{ card_items | debug }}
            -------------------------------------------------------------------- {% endcomment %}
            {% assign card_items = cards|size %}
            {% for card in cards %}
              {% for items in card %}
                {% for item in items[1] %}
                  {% assign key   = item[0] %}
                  {% assign value = item[1] %}
                  {% if key == 'enabled' %} {% assign card_enabled = value %} {% endif %}
                {% endfor %}
                {% if card_enabled == false %}
                {% assign card_items = card_items|minus:1 %} {% assign card_enabled = nil %} {% endif %}
              {% endfor %}
            {% endfor %}

            {% comment %} Set a scroller if enabled (cuurently NOT supported)
            --------------------------------------------------------------------
            {% if panel_settings.scroller %}
            <div id="{{panel_settings.id}}" style="display: none;">
            {% else %}
            <div id="{{panel_settings.id}}">
            {% endif %}
            -------------------------------------------------------------------- {% endcomment %}

            <div class="container-fluid" role="main">
              <div id="plans-container" class="container mt-5">
                <div class="row g-0">

                  {% for card in cards %}

                    {% comment %} extract card properties (AoH)
                    ------------------------------------------------------------ {% endcomment %}
                    {% for items in card %}
                      {% for item in items[1] %}
                        {% assign key   = item[0] %}
                        {% assign value = item[1] %}
                        {% if key == 'enabled' %}         {% assign card_enabled          = value %}                  {% endif %}
                        {% if key == 'recommended' %}     {% assign plan_recommended      = value %}                  {% endif %}
                        {% if key == 'name' %}            {% assign card_title            = value | strip_newlines%}  {% endif %}
                        {% if key == 'name_translate' %}  {% assign card_title_translate  = value %}                  {% endif %}
                        {% if key == 'price' %}           {% assign price                 = value %}                  {% endif %}
                        {% if key == 'benefits' %}        {% assign benefits              = value %}                  {% endif %}
                        {% if key == 'disbenefits' %}     {% assign disbenefits           = value %}                  {% endif %}
                        {% if key == 'buttons' %}         {% assign card_buttons          = value %}                  {% endif %}
                      {% endfor %}
                    {% endfor %}

                    {% assign col_size = 12|divided_by:card_items %}

                    {% comment %} extract sponsor link from button data (HoH)
                    ------------------------------------------------------------ {% endcomment %}
                    {% for items in card_buttons %} {% for item in items %}
                      {% if item[0] == 'href' %}
                        {% for elm in item[1] %}
                          {% assign key   = elm[0] %}
                          {% assign value = elm[1] %}
                          {% if key == 'tier_id' %}
                             {% if elm[1] contains 'plan_details_page' %}
                               {% assign sponsor_link = plan_details_page %}
                             {% else %}
                               {% capture sponsor_link %}{{provider_url}}/{{panel_options.account}}/sponsorships?tier_id={{elm[1]}}{% endcapture %}
                             {% endif %}
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    {% endfor %} {% endfor %}

                    {% if card_enabled %}
                    <div class="col-lg-{{col_size}} col-sm-6 mt-2 mb-2">
                      {% if plan_recommended %}
                      <div class="plan-card recommended raised-z2">
                      {% else %}
                      <div class="plan-card raised-z2">
                      {% endif %}

                        <div class="plan-name {{card_title_translate}}">{{card_title}}</div>
                        <div class="plan-price">
                          <div class="price-currency">{{price.currency}}</div>
                          <div class="price-amount">{{price.amount}}</div>
                          <div class="price-period">/{{price.period}}</div>
                        </div>
                        <hr>

                        <div class="plan-benefits">
                          {% comment %} extract benefits (AoH)
                          ------------------------------------------------------ {% endcomment %}
                          {% for benefit in benefits %}
                            {% for elm in benefit %}
                              {% assign value = elm[1] %}
                              <div class="plan-benefit">{{value}}</div>
                            {% endfor %}
                          {% endfor %}
                          {% comment %} disbenefit benefits (AoH)
                          ------------------------------------------------------ {% endcomment %}
                          {% for disbenefit in disbenefits %}
                            {% for elm in disbenefit %}
                              {% assign value = elm[1] %}
                              <div class="plan-disbenefit">{{value}}</div>
                            {% endfor %}
                          {% endfor %}
                        </div>
                        <a class="btn btn-primary plan-select" href="{{sponsor_link}}" target="_blank" rel="noopener noreferrer">Select</a>
                      </div>
                    </div>
                    {% endif %}
                    <!-- End Card -->
                  {% endfor %}
                  </div>
                </div>
            </div> <!-- End Cards -->
            {% comment %} END cards
            -------------------------------------------------------------------- {% endcomment %}

          </div> <!-- END main container -->

          {% if wave_properties.bottom.enabled %}
            {{panel_wave_bottom}}
          {% endif %}

        </section> <!-- END Panel {{panel_settings.id}} -->

        {% comment %} Reset element variables (already processed)
        ------------------------------------------------------------------------ {% endcomment %}
        {% assign panel_settings = nil %}

        {% comment %} END PLAN panel
        ------------------------------------------------------------------------ {% endcomment %}


        {% comment %} Collect SERVICE panel
        ------------------------------------------------------------------------ {% endcomment %}
        {% when 'service' %}
        {% if debug %}<!-- panel_defaults:  {{panel_config_defaults.service}} -->{% endif %}
        {% if debug %}<!-- panel_settings:  {{panel_settings}} -->{% endif %}

        {% assign panel_options = panel_config_defaults.service | merge: panel_settings %}
        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}

        <!-- Panel {{panel_settings.id}} -->
        <section id="{{panel_settings.id}}">

          {% if wave_properties.top.enabled %}
            {{panel_wave_top}}
          {% endif %}

          <!-- Main Container -->
          <div class="container {{panel_settings.properties}}">

            <!-- Heading -->
            <div class="noclass">
              <div class="{{panel_settings.animate}} mb-2">
                <h2 class="g-font-weight-500 mb-0">{{panel_settings.title}}</h2>
                <p class="tagline mb-0"><b>{{panel_settings.tagline}}</b></p>
                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
              </div>
              <!-- Description -->
              <div class="{{description_properties}}">{{panel_settings.description}}</div>
            </div>
            <!-- END Heading -->

            <!-- Cards -->
            {% comment %} calculate the number of card_items to be written
            -------------------------------------------------------------------- {% endcomment %}
            {% assign card_items = cards|size %}
            {% for card in cards %}
              {% for items in card %}
                {% for item in items[1] %}
                  {% assign key   = item[0] %}
                  {% assign value = item[1] %}
                  {% if key == 'enabled' %} {% assign card_enabled = value %} {% endif %}
                {% endfor %}
                {% if card_enabled == false %}
                {% assign card_items = card_items|minus:1 %} {% assign card_enabled = nil %} {% endif %}
              {% endfor %}
            {% endfor %}

            {% comment %} Set a scroller if enabled
            -------------------------------------------------------------------- {% endcomment %}
            {% if panel_settings.scroller %}
            <div class="noclass {{panel_settings.id}}" style="display: none;">
            {% else %}
            <div class="noclass {{panel_settings.id}}">
            {% endif %}

            <ul id="{{panel_settings.id}}-scroll-group" class="scroll-group scroll-group-horizontal align-items-stretch flex-wrap">
            {% for card in cards %}

              {% comment %} extract card properties (AoH)
              ------------------------------------------------------------------ {% endcomment %}
              {% for items in card %}
                {% for item in items[1] %}
                  {% assign key   = item[0] %}
                  {% assign value = item[1] %}
                  {% if key == 'enabled' %}           {% assign card_enabled          = value %}                  {% endif %}
                  {% if key == 'id' %}                {% assign card_id               = value %}                  {% endif %}
                  {% if key == 'href' %}              {% assign card_href             = value %}                  {% endif %}
                  {% if key == 'icon' %}              {% assign card_icon             = value %}                  {% endif %}
                  {% if key == 'icon_family' %}       {% assign icon_family           = value | downcase %}       {% endif %}
                  {% if key == 'icon_size' %}         {% assign icon_size             = value %}                  {% endif %}
                  {% if key == 'icon_color' %}        {% assign icon_color            = value %}                  {% endif %}
                  {% if key == 'title' %}             {% assign card_title            = value | strip_newlines %} {% endif %}
                  {% if key == 'tagline' %}           {% assign card_tagline          = value | strip_newlines %} {% endif %}
                  {% if key == 'header_translate' %}  {% assign card_header_translate = value %}                  {% endif %}
                  {% if key == 'text' %}              {% assign card_text             = value | strip_newlines %} {% endif %}
                  {% if key == 'services' %}          {% assign services                      = value %}                  {% endif %}
                {% endfor %}
              {% endfor %}

              {% if card_enabled %}
              <li id="{{panel_settings.id}}-scroll-item" class="scroll-group-item items-{{card_items}} p-0">
                <article class="card raised-z0 card-same-height mb-3">
                  <div class="card-profile mb-0">

                    <div class="card-icon mt-4">
                      <a href="{{card_href}}" class="link-no-decoration">
                        <i class="card-icon-circle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_size}} {{icon_color}} card-icon-background-color-primary"></i>
                      </a>
                    </div>

                    <div class="content mt-4">

                      <div class="card-header">
                        <h6 class="notoc category text-gray {{card_header_translate}}">{{card_title}}</h6>
                        <h4 class="notoc card-title {{card_header_translate}}">{{card_tagline}}</h4>
                      </div>
                      <div class="card-body g-min-height-350 r-text-300 mt-0">{{card_text}}</div>

                      <div class="card-footer">
                        <div class="row {{panel_settings.id}}">
                        	<div id="{{card_id}}" class="accordion">
                            {% for list in services %}
                        	  <div class="card">
                          		<div class="card-header" id="headingOne">
                          		  <h2 class="clearfix mb-0">
                            			<a class="btn btn-link card-profile collapsed" href="#void" data-bs-toggle="collapse" data-bs-target="#{{list.service.id}}" aria-expanded="false" aria-controls="{{list.service.id}}">
                                    <!-- i class="fa fa-chevron-circle-down"></i -->
                                    <i class="fa fa-chevron-circle-right"></i>
                                    {{list.service.title}}
                                  </a>
                          		  </h2>
                          		</div>
                          		<div id="{{list.service.id}}" class="collapse mb-4" aria-labelledby="{{list.service.id}}" data-bs-parent="#{{card_id}}">
                          		  <div class="footer-body ml-5 r-text-200">
                                  {{list.service.description}}
                                  <hr>
                                  <a class="card-link text-lowercase" href="{{list.service.href}}">
                                    {{readmore_text}} · {{list.service.title}}
                                  </a>
                                </div>
                          		</div>
                        	  </div>
                            {% endfor %}
                        	</div>
                        </div>
                      </div>

                    </div>

                  </div>
                </article>
              </li>
              <!-- end service card -->
              {% endif %}

            {% endfor %}
            {% comment %} END cards
            -------------------------------------------------------------------- {% endcomment %}
            </ul>
            </div>
            <!-- End Cards -->
          </div>
          <!-- End Main Container -->

          {% if wave_properties.bottom.enabled %}
            {{panel_wave_bottom}}
          {% endif %}

        </section>
        <!-- END Panel {{panel_settings.id}} -->

        {% comment %} Reset element variables (already processed)
        ------------------------------------------------------------------------ {% endcomment %}
        {% assign panel_settings = nil %}

        {% comment %} END SERVICES panel
        ------------------------------------------------------------------------ {% endcomment %}


        {% comment %} Collect NEWS panel
        ------------------------------------------------------------------------ {% endcomment %}
        {% when 'news' %}

        {% assign panel_options = panel_config_defaults.news|merge: panel_settings %}

        {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}

        <!-- Panel {{panel_settings.id}} -->
        <section id="{{panel_settings.id}}">

          {% if wave_properties.top.enabled %}
            {{panel_wave_top}}
          {% endif %}

          <!-- Main Container -->
          <div class="container {{panel_settings.properties}}">

            {% if panel_options.title %}
            <!-- Heading -->
            <div>
              <div class="{{panel_settings.animate}} mb-2">
                <h2 class="g-font-weight-500 mb-0">{{panel_options.title}}</h2>
                <p class="tagline mb-0"><b>{{panel_options.tagline}}</b></p>
                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
              </div>
              <!-- Description -->
              <div class="{{panel_settings.description_properties}}">
                {{panel_options.description}}
              </div>
            </div>
            <!-- End Heading -->
            {% endif %}

            {% for card in panel_options.cards %}
              {% for items in card %}
                {% for item in items[1] %}
                  {% assign key   = item[0] %}
                  {% assign value = item[1] %}
                  {% if key == 'infinite_scroll' %} {% assign card_infinite_scroll  = value %} {% endif %}
                  {% if key == 'animate' %}         {% assign card_animate          = value %} {% endif %}
                  {% if key == 'block' %}           {% assign card_block            = value %} {% endif %}
                  {% if key == 'num_per_row' %}     {% assign cards_per_row         = value %} {% endif %}
                  {% if key == 'max_posts' %}       {% assign posts_max             = value %} {% endif %}
                  {% if key == 'truncatewords' %}   {% assign truncatewords         = value %} {% endif %}
                {% endfor %}
              {% endfor %}

              {% assign posts_written     = 0 %}
              {% assign last_post_written = false %}

              {% comment %} default for card_block: card-deck
              ------------------------------------------------------------------ {% endcomment %}
              {% if card_block == "card-deck" or card_block == "card-list" %}
                <!-- [INFO   ] [~/assets/data/panel.html              ] [ blocktype detected as: {{card_block}} ] -->
			        {% else %}
				        <!-- [INFO   ] [~/assets/data/panel.html              ] [ set blocktype to: card-deck ] -->
                {% assign card_block = "card-deck" %}
              {% endif %}

              <!-- [INFO   ] [~/assets/data/panel.html              ] [ blocktype detected as: {{card_block}} ] -->
              {% if card_block == 'card-list' %}
              <div>
                <ul id="{{panel_settings.id}}-scroll-group" class="scroll-group scroll-group-horizontal align-items-stretch flex-wrap">
                  <!-- [INFO   ] [~/assets/data/panel.html              ] [ write post items (card_block == 'card-list')] -->
                {% for post in site.posts %}
                  {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}

                  {% if last_post_written != true %}
                    {% assign posts_written = posts_written|plus:1 %}
                			<li id="{{panel_settings.id}}-scroll-item" class="scroll-group-item items-{{cards_per_row}} p-0">
                        <article class="card card-same-height raised-z0 mb-5">
                          {% if post.image %}
                            {% if post.image.path %}
                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
                            {% assign post_width = '80x' %}
                            {% else %}
                              <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
                            {% assign post_width = '80x' %}
                            {% endif %}
                          {% else %}
                            <img class="mt-2" src="" alt="">
                            {% assign post_width = '100x' %}
                          {% endif %}
                          <h3 class="card-header bg-primary notoc notranslate">{{post.title}}</h3>
                          <!-- Body|Excerpt -->
                          <div class="card-body r-text-300 mt-0">
                            {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
                            {{post.excerpt|truncatewords: truncate_words}}
                          </div>
                          <!-- End Body|Excerpt -->
                          <div class="card-footer r-text-200">

                            <div class="card-footer-text">
                              {% if language == "en" %}
                                <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}
                              {% endif %}
                              {% if language == "de" %}
                                <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%-d. %B %Y"}}
                              {% endif %}

                              <!-- Cleanup categories by given blacklist -->
                              {% assign my_categories = post.categories | difference: category_blacklist %}

                              <!-- Build element strings -->
                              {% assign categories    = my_categories |join: " · "  %}
                              {% assign tags          = post.tags | join: " · "  %}

                              <p class="result-item-text small mb-3 notranslate">
                                <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i>
                                <span class="sr-categories">{{categories}}</span>
                                <br>
                                <i class="mdi mdi-tag mdi-18px mr-1"></i>
                                <span class="sr-tags">{{tags}}</span>
                            </p>
                            </div>
                            <a class="card-link md-grey-900 text-lowercase"
                               href="{{post.url}}">
                               {{readmore_text}} · {{post.tagline}}
                            </a>
                          </div>
                        </article>
                      </li>
                  {% endif %}
                {% endfor %}

                </ul>
              </div>
              {% endif %}

              {% if card_block == 'card-deck' %}
              <!-- Recent posts -->
              <div class="row card-deck">
                <!-- [INFO   ] [~/assets/data/panel.html              ] [ write post items (card_block == 'card-deck')] -->
              {% for post in site.posts %} {% for category in post.categories %}
                {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}

                {% if category == post_category and last_post_written != true %}
                  {% assign posts_written = posts_written|plus:1 %}
                    <!-- Posts -->
                    <article class="card raised-z0 mb-3">
                      {% if post.image %}
                        {% if post.image.path %}
                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image.path}}" alt="{{post.title}}" style="{{image_filters}};">
                        {% assign post_width = '80x' %}
                        {% else %}
                          <img class="img-fluid img-object--cover g-height-300" src="{{post.image}}" alt="{{post.title}}" style="{{image_filters}};">
                        {% assign post_width = '80x' %}
                        {% endif %}
                      {% else %}
                        <img class="mt-2" src="" alt="">
                        {% assign post_width = '100x' %}
                      {% endif %}
                      <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
                      <!-- Body|Excerpt -->
                      <div class="card-body r-text-300 mt-0">
                        {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
                        {{post.excerpt|truncatewords: truncate_words}}
                      </div>
                      <!-- End Body|Excerpt -->
                      <div class="card-footer r-text-200">

                        <div class="card-footer-text">
                          {% if language == "en" %}
                            <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%Y %B, %e"}}
                          {% endif %}
                          {% if language == "de" %}
                            <i class="mdi mdi-calendar-blank md-grey-900 mr-1"></i>{{post.date | localize: "%-d. %B %Y"}}
                          {% endif %}
                        </div>
                        <a class="card-link md-grey-900 text-lowercase"
                           href="{{post.url}}">
                           {{readmore_text}} · {{post.tagline}}
                        </a>
                      </div>
                    </article>
                    <!-- End Posts -->

                    <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
                    {% assign sm = posts_written | modulo: bs_card_deck.break_on_sm %}
                    {% assign md = posts_written | modulo: bs_card_deck.break_on_md %}
                    {% assign lg = posts_written | modulo: bs_card_deck.break_on_lg %}
                    {% assign xl = posts_written | modulo: bs_card_deck.break_on_xl %}

                    <!-- Add 'column setters' for BS break points -->
                    {% if sm == 0 %}
                      <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
                    {% endif %}

                    {% if md == 0 %}
                      <div class="w-100 d-none d-md-block d-lg-none"> <!-- break on md --> </div>
                    {% endif %}

                    {% if lg == 0 %}
                      <div class="w-100 d-none d-lg-block d-xl-none"> <!-- break on lg --> </div>
                    {% endif %}

                    {% if xl == 0 %}
                      <div class="w-100 d-none d-xl-block" ><!-- break on xl --> </div>
                    {% endif %}

                {% endif %}
              {% endfor %} {% endfor %}
              </div>
              {% endif %}
              <!-- End recent posts -->
            {% endfor %}

          </div>
          <!-- End Main Container -->

          {% if wave_properties.bottom.enabled %}
            {{panel_wave_bottom}}
          {% endif %}

        </section>
        <!-- End news panel: {{panel_settings.id}} -->

        {% comment %} Reset element variables (already processed)
        ------------------------------------------------------------------------ {% endcomment %}
        {% assign panel_settings = nil %}

        {% comment %} END NEWS panel
        ------------------------------------------------------------------------ {% endcomment %}

        {% else %}
        {% comment %} Collect EXCEPTION panel: given type NOT found
        ------------------------------------------------------------------------ {% endcomment %}
        {% unless panel_settings.id == 'exception_container' %}
        <div id="exception_container">
          <div id="{{panel_settings.id}}" class="container-fluid no-padding">
            <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
              <div class="box">
                <div class="content content-danger">
                  <h2 class="notoc">
                    <i class="mdi mdi-alarm-light mdi-3x mdi-md-red mr-1"></i>
                    panel of type <big>{{panel_settings.type}}</big> not found
                  </h2>
                  <h4 class="notoc box-title">Check your configuration at {{panel_config_file_name}}</h4>
                  <div class="box-description">
                    Don't worry about this. Maybe you've a typo in the panel configuration.
                    Check the panel config file for the unknown type. <br />
                    Check for something wrong like:
                    <div class="mt-2 mb-1">
                      <b>id:       {{panel_settings.id}}</b>  <br />
                      <b>type:     {{panel_settings.type}}</b> <br />
                      <b>comment:  {{panel_settings.comment}}</b>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> <!-- End panel {{panel_settings.id}} -->
        </div> <!-- End exception_container -->
        {% endunless %}

        {% comment %} Reset element variables (already processed)
        ------------------------------------------------------------------------ {% endcomment %}
        {% assign panel_settings = nil %}

        {% comment %} END EXEPTION panel
        ------------------------------------------------------------------------ {% endcomment %}

        {% endcase %}
      {% endif %} {% comment %} endif enabled {% endcomment %}

    {% endfor %}  {% comment %} END panels {% endcomment %}
  {% endfor %}  {% comment %} END panel_config {% endcomment %}
{% endfor %}  {% comment %} END panel_config_settings {% endcomment %}

{% endcapture %}
{% if production %}
  {% capture _LINE_FEED %}{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ cache | strip_html_comments }}{% else %}{% capture _content %}{{ cache | strip_html_comments }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ cache | strip_html_comments | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
{% else %}
  {{ cache | pretty_print | remove:'<html><body>' | remove:'</body></html>' | strip_empty_lines }}
{% endif %}
{% assign cache = nil %}