<div id="drawer-handle" title="Toggle panel">
  <div>
    <img src="/media/icons/left_arrow.png" class="drawer-handle-arrow">
    <p>M</p>
    <p style="padding-bottom:15px;">Y</p>
    <p>P</p>
    <p>R</p>
    <p>O</p>
    <p>P</p>
    <p>E</p>
    <p>R</p>
    <p>T</p>
    <p>I</p>
    <p>E</p>
    <p>S</p>
    <img src="/media/icons/left_arrow.png" class="drawer-handle-arrow">
  </div>
  <div>
    <img src="/media/icons/right_arrow.png" class="drawer-handle-arrow">
    <p>M</p>
    <p style="padding-bottom:15px;">Y</p>
    <p>P</p>
    <p>R</p>
    <p>O</p>
    <p>P</p>
    <p>E</p>
    <p>R</p>
    <p>T</p>
    <p>I</p>
    <p>E</p>
    <p>S</p>
    <img src="/media/icons/right_arrow.png" class="drawer-handle-arrow">
  </div>
</div>
        <div id="drawer-content">
            {% if user.is_authenticated %}
                {% if userLevel != 'Hiatus' %}
                    {% include "webmap/geocoder.html" %}
                    
                    {% include "webmap/locationslist.html" %}
                {% else %}
                    {% include "webmap/hiatusStatus.html" %}
                {% endif %}
            {% else %}
                {% include "webmap/notloggedin.html" %}
            {% endif %}
        </div>
<script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "KUCaL"
    }], "*")
  }
</script>

