{% comment %}
<button
  type="button"
  class="catalog-dialog-trigger"
  data-toggle-class-on-target
  data-toggle-target="#dialog_catalog"
  data-toggle-escape
  data-toggle-modal
  style="display:none">
  Click
</button>

<div class="catalog-dialog" id="dialog_catalog">
  <section class="catalog-dialog-container">
    <div class="catalog-dialog-content">
      <h4>
        <strong>Welcome to the WSIU Course Catalog.</strong>
      </h4>
			<p>Welcome to the future home of WSI University. At this time this area is under construction. If needed, please access WSIU through our Homefront site as usual. Do not access courses here at this time. Thank you.</p>
    </div>
    <footer class="catalog-dialog-footer">
      <button
        type="button"
        class="np-button"
        data-toggle-trigger-off>
        I Acknowledge
      </button>
    </footer>
  </section>
</div>

<style>
  .catalog-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.75);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease-out;
  }
  .catalog-dialog.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .catalog-dialog-container {
    width: 100%;
    max-width: 700px;
    margin: auto;
    transform: translateY(-1em) scale(0.95);
    background-color: white;
    transition: transform 0.25s ease-out;
  }

  .catalog-dialog.is-active .catalog-dialog-container {
    transform: translateY(0) scale(1);
  }

  .catalog-dialog-content h4 {
    font-family: "Lato"
    , sans-serif;
    font-size: 20px;
  }

  .catalog-dialog-content {
    line-height: normal;
  }

  .catalog-dialog-content {
    padding: 12px 24px;
  }

  .catalog-dialog-footer {
    padding: 0 24px 24px;
  }

  .catalog-dialog-footer button {
    display: inline-block;
    cursor: pointer;
  }
</style>

<script>
  $(document).ready(function(){
  if (window.location.pathname == "/app/catalog" && !sessionStorage.catalogAcknowledged) {
    $(".catalog-dialog-trigger").click()
    sessionStorage.catalogAcknowledged = true;
  }
  })

</script>
{% endcomment %}
