<div id="compare-popup" class="dcaw-popup" style="display: none;">
  <div class="dcaw-popup-content">
    <div class="dcaw-popup-header">
      <span class="dcaw-popup-close">&times;</span>
    </div>
    {% include 'compare-category-select.twig' with {
      'categories': categories
    } %}
    <a href="{{ compare_page }}" class="dcaw-popup-body">
      {% include 'compare-table.twig' with { noDelete: 'on' }%}
    </a>
  </div>
</div>


<style>
  .dcaw-popup {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
  }

  .dcaw-popup-content {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    border: 1px solid #888;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 20px;
    box-sizing: border-box;
  }

  .dcaw-popup-header {
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #888;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dcaw-popup-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .dcaw-popup-close:hover,
  .dcaw-popup-close:focus {
    color: black;
    text-decoration: none;
  }

  .dcaw-popup-body {
    margin-top: 10px;
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const compareButtons = document.querySelectorAll('.js-dcaw-compare-btn[data-show-popup="on"]');
    compareButtons.forEach(button => {
      button.addEventListener('click', function(e) {
        e.preventDefault();
        const popup = document.getElementById('compare-popup');
        if (popup) {
          popup.style.display = 'block';
        }
      });
    });

    // Close popup when clicking on the close button or outside the popup
    const popup = document.getElementById('compare-popup');
    if (popup) {
      const closeButton = popup.querySelector('.dcaw-popup-close');
      closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
      });
      window.addEventListener('click', function(e) {
        if (e.target == popup) {
          popup.style.display = 'none';
        }
      });
    }
  });

</script>
