{% extends 'base.html' %}

{% block announce %}
<span class="twemoji" style="vertical-align: middle;">
  {% include ".icons/octicons/heart-fill-24.svg" %}
</span>
<a class="pdm-expansions" style="display: none;">Python Dependency Manager</a>
{% endblock %}

{% block footer %}
  <div id="readthedocs-embed-flyout"></div>
  {{ super() }}
  <div class="bot-container">
    <a class="twemoji bot-button" href="javascript:void(0)" title="Ask bot about PDM">
      {% include ".icons/fontawesome/solid/robot.svg" %}
    </a>
    <iframe
      src="{{ config.extra.chatbot.url }}"
    ></iframe>
  </div>
  <script>
    const botButton = document.querySelector('.bot-button');
    const iFrame = document.querySelector('.bot-container > iframe');
    const hideBot = () => {
      iFrame.style.height = null;
      botButton.style.display = 'block';
      document.removeEventListener('click', hideBot);
    }
    botButton.addEventListener('click', (e) => {
      const curHeight = window.getComputedStyle(iFrame).height;
      const header = document.querySelector('.md-header');
      const height = `calc(100vh - ${header.clientHeight + 120}px)`;
      if (curHeight === '0px') {
        iFrame.style.height = height;
        botButton.style.display = 'none';
        document.addEventListener('click', hideBot);
      } else {
        hideBot();
      }
      e.stopPropagation();
    });
    iFrame.addEventListener('click', (e) => {
      e.stopPropagation();
    });
    window.addEventListener('resize', (e) => {
      if (iFrame.style.height) {
        const header = document.querySelector('.md-header');
        const height = `calc(100vh - ${header.clientHeight + 120}px)`;
        iFrame.style.height = height;
      }
      e.stopPropagation();
    })
  </script>
{% endblock %}
