{% extends 'base.html' %}
{% load wagtailmetadata_tags %}

<!-- Head -->
{% block meta_tags %}
{% meta_tags %}
{% endblock meta_tags %}

{% block style %}

<style lang="postcss">
  .btn-share {
    --btn-color: #275efe;
    position: relative;
    padding: 16px 32px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: white;
    background: none;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .btn-share::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--btn-color);
    border-radius: 24px;
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .btn-share .btn-text,
  .btn-share .btn-icon {
    display: inline-flex;
    vertical-align: middle;
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .btn-share .btn-text {
    transition-delay: 0.05s;
  }

  .btn-share .btn-icon {
    margin-left: 8px;
    transition-delay: 0.1s;
  }

  .btn-share .social-icons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    transform: translateY(-50%);
  }

  .btn-share .social-icons li {
    flex: 1;
  }

  .btn-share .social-icons li a {
    display: inline-flex;
    vertical-align: middle;
    transform: translateY(55px);
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .btn-share .social-icons li a:hover {
    opacity: 0.5;
  }

  .btn-share:hover::before {
    transform: scale(1.2);
  }

  .btn-share:hover .btn-text,
  .btn-share:hover .btn-icon {
    transform: translateY(-55px);
  }

  .btn-share:hover .social-icons li a {
    transform: translateY(0);
  }

  .btn-share:hover .social-icons li:nth-child(1) a {
    transition-delay: 0.15s;
  }

  .btn-share:hover .social-icons li:nth-child(2) a {
    transition-delay: 0.2s;
  }

  .btn-share:hover .social-icons li:nth-child(3) a {
    transition-delay: 0.25s;
  }
</style>
<style>
  menu,
  ul,
  ol {
    list-style: disc;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }
</style>

{% endblock style %}


<!-- Head // -->


{% block breadcrumb %}
<section class="">
  {% if page.bannercontent %}
  {% include 'components/common/carousel.html' with width=page.bannerWidth height=page.bannerHeight timer=page.bannerTimer content=page.bannercontent %}
  {% elif page.get_parent.specific.bannercontent %}
  {% include 'components/common/carousel.html' with width=page.get_parent.specific.bannerWidth height=page.get_parent.specific.bannerHeight timer=page.get_parent.specific.bannerTimer content=page.get_parent.specific.bannercontent %}
  {% endif %}
  <div class="sticky top-16 z-40 bg-white">
    <nav class="mx-auto py-1 px-4 text-sm">
      <ol class="flex items-center gap-2">
        <a href="/" aria-label="Home" class="-mr-1.5 opacity-80">
          <i class='bx bxs-home'></i>
        </a>
        >
        {% for p in page.breadcrumb_list %}
        {% if p.show_in_menus %}
        <li class="hover:font-bold">
          <a href="{{p.url}}" class="flex items-center">
            {% if p.menuName %}
            {{p.menuName}}
            {% else %}
            {{p.title}}
            {% endif %} >
          </a>
        </li>
        {% endif %}
        {% endfor %}
        <li aria-current="page" class="font-bold">
          {% if page.menuName %}
          {{page.menuName}}
          {% else %}
          {{page.title}}
          {% endif %}
        </li>

      </ol>
    </nav>
  </div>
</section>
{% endblock breadcrumb %}

{% block content %}

{% endblock content %}

{% block script %}

<script>
  function copyUrl(url) {
    var copyText = url;
    navigator.clipboard.writeText(window.location.origin + copyText);
  }
</script>

{% endblock script %}