{% from "./partials/sliced-string.html" import slicedString %}

<input id="burger-menu" type="checkbox" />
<label for="burger-menu" class="shadow">
  <div class="wrapper">
    <span></span>
    <span></span>
    <span></span>
  </div>
</label>
<div class="sidebar-panel fixed pin-t pin-l pin-b w-64 bg-grey-lighter font-sans pt-8 pr-4 pb-4 pl-4">
  <div class="sidebar-panel__content">
    {% if asyncapi.info().ext('x-logo') %}
    <img src="{{ asyncapi.info().ext('x-logo') }}" alt="{{ asyncapi.info().title() }} logo">
    {% else %}
    <h1 class="text-2xl font-thin">{{ asyncapi.info().title() }} {{ asyncapi.info().version() }}</h1>
    {% endif %}
    <ul class="text-sm mt-10 list-reset mt-2">
      <li class="mb-3">
        <a class="js-menu-item text-grey-darkest no-underline" href="#introduction">Introduction</a>
      </li>
      {% if asyncapi.servers %}
      <li class="mb-3">
        <a class="js-menu-item text-grey-darkest no-underline" href="#servers">Servers</a>
      </li>
      {% endif %}
    </ul>
    {% if asyncapi.hasChannels() %}
    <h2 class="text-xs uppercase text-grey mt-10 mb-4 font-thin">Operations</h2>
    <ul class="text-sm list-reset mt-2">
      {% if params.sidebarOrganization == 'byTags' %}
      <!-- With tags in sidebar -->
      {% if asyncapi.hasTags() %}
      {% for categorytags in asyncapi.tags() %}
      <div class="mt-4 {% if open %}is-open{% endif %}">
        <div class="js-prop cursor-pointer py-2 flex property">
          <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
            <span class="text-sm"
              style="word-break: break-word;text-transform: capitalize;">{{ categorytags.name() }}</span>
            <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
              <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
            </svg>
          </div>
        </div>
        <div class="children">
          {% for channelName, channel in asyncapi.channels() %}
             {% if channel.publish() and channel.publish().hasTags() and channel.publish() | containTags(categorytags) %}
              <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
                href="#operation-publish-{{ channelName }}">
                <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded"
                  style="height: 21px;font-size: 11px;" title="Publish">Pub</span>
                {% if channel.publish().summary() %}
                <span style="padding-top: 2px;">
                  {{ channel.publish().summary() }}
                </span>
                {% else %}
                <div style="display:inline-block;">
                  <span class="string-chunk" style="padding-top: 2px;">
                    {{channelName}}
                  </span>
                </div>
                {% endif %}
              </a>
            {% endif %}

            {% if channel.subscribe() and channel.subscribe().hasTags() and channel.subscribe() | containTags(categorytags) %}
            <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
              href="#operation-subscribe-{{ channelName }}">
              {% if channel.deprecated %}<span title="Deprecated"></span>{% endif %}
              <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded"
                style="height: 21px;font-size: 11px;" title="Subscribe">Sub</span>
              {% if channel.subscribe().summary() %}
              <span style="padding-top: 2px;">
                {{ channel.subscribe().summary() }}
              </span>
              {% else %}
              <div style="display:inline-block;">
                <span class="string-chunk" style="padding-top: 2px;">
                  {{channelName}}
                </span>
              </div>
              {% endif %}
            </a>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endfor %}
      {% endif %}

      {% if asyncapi.channels() | containNoTag(asyncapi.tags()) %}
      <!-- Untagged operations -->
      <div class="mt-4 {% if open %}is-open{% endif %}">
        <div class="js-prop cursor-pointer py-2 flex property">
          <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
            <span class="text-sm" style="word-break: break-word;text-transform: capitalize;">Untagged</span>
            <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
              <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
            </svg>
          </div>
        </div>
        <div class="children">
          {% for channelName, channel in asyncapi.channels() %}
          {% if channel.hasPublish() and (not channel.publish().hasTags() or not channel.publish() | containTags(asyncapi.tags())) %}
          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
            href="#operation-publish-{{ channelName }}">
            <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded"
              style="height: 21px;font-size: 11px;" title="Publish">Pub</span>
            {% if channel.publish().summary() %}
            <span style="padding-top: 2px;">
              {{ channel.publish().summary() }}
            </span>
            {% else %}
            <div style="display:inline-block;">
              <span class="string-chunk" style="padding-top: 2px;">
                {{channelName}}
              </span>
            </div>
            {% endif %}
          </a>
          {% endif %}
          {% if channel.hasSubscribe() and (not channel.subscribe().hasTags() or not channel.subscribe() | containTags(asyncapi.tags())) %}
          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
            href="#operation-subscribe-{{ channelName }}">
            <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded"
              style="height: 21px;font-size: 11px;" title="Subscribe">Sub</span>
            {% if channel.subscribe().summary() %}
            <span style="padding-top: 2px;">
              {{ channel.subscribe().summary() }}
            </span>
            {% else %}
            <div style="display:inline-block;">
              <span class="string-chunk" style="padding-top: 2px;">
                {{channelName}}
              </span>
            </div>
            {% endif %}
          </a>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% else %}

      <!--Without tags in sidebar-->
      {% for channelName, channel in asyncapi.channels() %}
      <li>
        {% if channel.publish() %}
        <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
          href="#operation-publish-{{ channelName }}">
          <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded"
            style="height: 21px;font-size: 11px;" title="Publish">Pub</span>
          {% if channel.publish().summary() %}
          <span style="padding-top: 2px;">
            {{ channel.publish().summary() }}
          </span>
          {% else %}
          <div style="display:inline-block;">
            <span class="string-chunk" style="padding-top: 2px;">
              {{channelName}}
            </span>
          </div>
          {% endif %}
        </a>
        {% endif %}
        {% if channel.subscribe() %}
        <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
          href="#operation-subscribe-{{ channelName }}">
          <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded"
            style="height: 21px;font-size: 11px;" title="Subscribe">Sub</span>
          {% if channel.subscribe().summary() %}
          <span style="padding-top: 2px;">
            {{ channel.subscribe().summary() }}
          </span>
          {% else %}
          <div style="display:inline-block;">
            <span class="string-chunk" style="padding-top: 2px;">
              {{channelName}}
            </span>
          </div>
          {% endif %}
        </a>
        {% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    <h2 class="text-xs uppercase text-grey mt-10 mb-4 font-thin">Messages</h2>
    <ul class="text-sm list-reset mt-2">
      {% for key, value in asyncapi.allMessages() %}
        <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
          href="#message-{{ key }}">
          <div style="display:inline-block;">
            {{ slicedString(key, 'padding-top: 2px;') }}
          </div>
        </a>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>
