<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/4515944.js"></script>

<script>
$(function(){
 function getQueryParamValue(paramName){
   const urlParams = new URLSearchParams(window.location.search);
   return urlParams.get(paramName);
 }

 // Set or reset the membership cookie based on URL parameter
 if (getQueryParamValue('member') === 'none') {
     document.cookie = "isAMember=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
     console.log("Membership status has been reset.");
 } else if (getQueryParamValue('member')) {
     if (!document.cookie.split('; ').find(row => row.startsWith('isAMember='))) {
         document.cookie = "isAMember=" + getQueryParamValue('member') + "; expires=Thu, 01 Dec 2099 12:00:00 UTC; path=/";
         console.log("SDA Membership Recognized");
     }
 }

 const getCookieValue = (name) => (
     document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
 );

 if (getCookieValue('isAMember')) {
     // MEMBER LOGIC
     if (window.location.pathname == "/member-login") {
         $('#poc .body').append("<p>Welcome, member. You have been recognized as a member of " + getCookieValue('isAMember') + " organization.</p>");
     }
     $('.secondary-navigation li:last-child a').text('Welcome ' + getCookieValue('isAMember'));
     $('.secondary-navigation li:last-child a').after(" <a href='?member=none' class='member-logout'>(Logout)</a>");
 } else {
     // NON-MEMBER LOGIC
     if ($("a[href='/member-resources']").length) {
         $('#poc .body').after(memberPopUp);
         $('#poc .body').addClass('locked');
         $('.items article').hide();
     } 
 }
});

var memberPopUp = (function(){/**

 <!-- Full-screen overlay with popup box --> 
 <div id="overlay"> 
     <div id="popup-box"> 
         <!-- Paragraph inside a div container --> 
         <div class="paragraph-container"> 
             <p>Sign in or Become an NSDA Member to Read More</p> 
         </div> 
         <!-- Container for buttons --> 
         <div class="button-container"> 
             <div class="left-buttons"> 
                 <a class="popup-btn" id="button1" href="https://kurts-yurt.specialdistrict.org/member-organizations">Log in through my member organization &gt;&gt;</a>
                 <p>Or</p> 
                 <form method='GET' action='?'>Enter Your Member Code: <input name='member'><input type='submit' value='Login'></form>
             </div> 
             <button class="popup-btn" id="button3">Sign up for a trial membership >></button> 
         </div> 
     </div> 
 </div> 

**/}).toString().slice(15,-5);
</script>

<style>
.locked {
    overflow: hidden;
    max-height: 300px;
}
#overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}
#popup-box {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid #b0b0b0;
    text-align: center;
    width: 800px;
    height: 500px;
    display: flex;
    flex-direction: column;
}
.paragraph-container {
    background-color: #d0e2f2;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paragraph-container p {
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-buttons {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-right: 20px;
}
.popup-btn {
    padding: 10px 20px;
    background-color: #f0f0f0;
    color: #000;
    border: 2px solid #b0b0b0;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    flex: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.popup-btn:hover {
    background-color: #e0e0e0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    border-color: #333;
}
</style>