<div x-data="HF_LIC_APP">
    <div class="hfng-logo-wrap">
        <img src="{{ links.happyfenceng_logo_url }}"
            alt="HappyFenceNG Logo"
            class="hfng-logo">
        <p class="hfng-logo-info">
            {{ texts.happyfenceng_release_name }} &nbsp; | &nbsp;
            {{ texts.happyfenceng_version }} &nbsp; | &nbsp;
            {{ texts.happyfenceng_build }}
        </p>
    </div>
    
    <hr class="hfng-divider" />
    <h1>{{texts.title|raw}}   
    <section id="hfng-current">
      <div>
        <p><span class="hfng-plan-title">{{texts.plan_title}}</span><span :class="planClass">{{texts.plan}}</span></p>
      </div>
      <div x-show="canUpgrade" 
            x-text="upgradeText"             
            class="hfng-can-upgrade"
            x-transition.opacity.duration.300ms>
      </div>
    </section>
    
    <!-- COMPARE EDITIONS -->
      <section id="hfng-pricing" class="hfng-compare">
        <h3>{{texts.compare_editions}}</h3>

        <div class="hfng-plans" role="table" aria-label="Compare editions">
          <!-- FREE -->
          <article class="hfng-plan" role="row">
            <h3 style="margin-bottom: 0;">{{texts.free_edition}}</h3>
            <div class="hfng-tag">{{texts.edition}}</div>
            <ul>
              <li><span>{{texts.dashboard}}</span>✅</li>
              <li><span>{{texts.option_1}}</span>✅</li>
              <li><span>{{texts.option_2}}</span>✅</li>
              <li><span>{{texts.option_3|raw}}</span>❌</li>
              <li><span>{{texts.option_4}}</span>❌</li>
              <li><span>{{texts.option_5}}</span>✅</li>
              <li><span>{{texts.option_6}}</span>❌</li>
              <li><span>{{texts.option_7}}</span>✅</li>
              <li><span>{{texts.option_8}}</span>❌</li>
              <li><span>{{texts.option_9}}</span>❌</li> 
              <li><span>{{texts.integrity_check}}</span>❌</li>             
              <li>
                <li style="display: flex; flex-direction: column;"><span>{{texts.option_10}}</span><strong>{{texts.option_10_free}}</strong>
              </li>
              <li><span>{{texts.option_11}}</span>❌</li>
              <li><span>{{texts.option_12}}</span>❌</li>
              <li><span>{{texts.option_13}}</span>❌</li>
              <li><span>{{texts.option_14}}</span>✅</li>
              <li><span>{{texts.option_15}}</span>❌</li>
              <li><span>{{texts.option_16}}</span>❌</li>
              <li><span>{{texts.option_17}}</span>❌</li>
              <li><span>{{texts.option_18}}</span>❌</li>
              <li><span>{{texts.option_19}}</span>❌</li>              
              <li style="display: flex; flex-direction: column;"><span>{{texts.support}}</span><strong>{{texts.free_support}}</strong></li>
            </ul>
          </article>

          <!-- PRO -->
          <article class="hfng-plan" role="row">
            <h3 style="margin-bottom: 0;">{{texts.pro_edition}}</h3>
            <div class="hfng-tag">{{texts.edition}}</div>
            <ul>
              <li><span>{{texts.dashboard}}</span>✅</li>
              <li><span>{{texts.option_1}}</span>✅</li>
              <li><span>{{texts.option_2}}</span>✅</li>
              <li><span>{{texts.option_3|raw}}</span>✅</li>
              <li><span>{{texts.option_4}}</span>✅</li>
              <li><span>{{texts.option_5}}</span>✅</li>
              <li><span>{{texts.option_6}}</span>❌</li>
              <li><span>{{texts.option_7}}</span>✅</li>
              <li><span>{{texts.option_8}}</span>✅</li>
              <li><span>{{texts.option_9}}</span>✅</li> 
              <li><span>{{texts.integrity_check}}</span>❌</li>                          
              <li>
                <li style="display: flex; flex-direction: column;"><span>{{texts.option_10}}</span><strong>{{texts.option_10_pro}}</strong>
              </li>
              <li><span>{{texts.option_11}}</span>8</li>
              <li><span>{{texts.option_12}}</span>❌</li>
              <li><span>{{texts.option_13}}</span>✅</li>
              <li><span>{{texts.option_14}}</span>✅</li>
              <li><span>{{texts.option_15}}</span>❌</li>
              <li><span>{{texts.option_16}}</span>❌</li>
              <li><span>{{texts.option_17}}</span>❌</li>
              <li><span>{{texts.option_18}}</span>✅</li>
              <li><span>{{texts.option_19}}</span>✅</li>              
              <li style="display: flex; flex-direction: column;"><span>{{texts.support}}</span><strong>{{texts.pro_support}}</strong></li>
            </ul>
          </article>

          <!-- AGENCY -->
          <article class="hfng-plan" role="row">
            <h3 style="margin-bottom: 0;">{{texts.agency_edition}}</h3>
            <div class="hfng-tag">{{texts.edition}}</div>
            <ul>
              <li><span>{{texts.dashboard}}</span>✅</li>
              <li><span>{{texts.option_1}}</span>✅</li>
              <li><span>{{texts.option_2}}</span>✅</li>
              <li><span>{{texts.option_3|raw}}</span>✅</li>
              <li><span>{{texts.option_4}}</span>✅</li>
              <li><span>{{texts.option_5}}</span>✅</li>
              <li><span>{{texts.option_6}}</span>✅</li>
              <li><span>{{texts.option_7}}</span>✅</li>
              <li><span>{{texts.option_8}}</span>✅</li>
              <li><span>{{texts.option_9}}</span>✅</li>
              <li><span>{{texts.integrity_check}}</span>✅</li>                           
              <li>
                <li style="display: flex; flex-direction: column;"><span>{{texts.option_10}}</span><strong>{{texts.option_10_agency}}</strong>
              </li>
              <li><span>{{texts.option_11}}</span>8</li>
              <li><span>{{texts.option_12}}</span>❌</li>
              <li><span>{{texts.option_13}}</span>✅</li>
              <li><span>{{texts.option_14}}</span>✅</li>
              <li><span>{{texts.option_15}}</span>❌</li>
              <li><span>{{texts.option_16}}</span>✅</li>
              <li><span>{{texts.option_17}}</span>❌</li>
              <li><span>{{texts.option_18}}</span>✅</li>
              <li><span>{{texts.option_19}}</span>✅</li>              
              <li style="display: flex; flex-direction: column;"><span>{{texts.support}}</span><strong>{{texts.agency_support}}</strong></li>
            </ul>
          </article>

          <!-- ENTERPRISE -->
          <article class="hfng-plan" role="row">
            <h3 style="margin-bottom: 0;">{{texts.enterprise_edition}}</h3>
            <div class="hfng-tag">{{texts.edition}}</div>
            <ul>
              <li><span>{{texts.dashboard}}</span>✅</li>
              <li><span>{{texts.option_1}}</span>✅</li>
              <li><span>{{texts.option_2}}</span>✅</li>
              <li><span>{{texts.option_3|raw}}</span>✅</li>
              <li><span>{{texts.option_4}}</span>✅</li>
              <li><span>{{texts.option_5}}</span>✅</li>
              <li><span>{{texts.option_6}}</span>✅</li>
              <li><span>{{texts.option_7}}</span>✅</li>
              <li><span>{{texts.option_8}}</span>✅</li>
              <li><span>{{texts.option_9}}</span>✅</li>       
              <li><span>{{texts.integrity_check}}</span>✅</li>                                  
              <li>
                <li style="display: flex; flex-direction: column;"><span>{{texts.option_10}}</span><strong>{{texts.option_10_enterprise}}</strong>
              </li>
              <li><span>{{texts.option_11}}</span>✅</li>
              <li><span>{{texts.option_12}}</span>✅</li>
              <li><span>{{texts.option_13}}</span>✅</li>
              <li><span>{{texts.option_14}}</span>✅</li>
              <li><span>{{texts.option_15}}</span>✅</li>
              <li><span>{{texts.option_16}}</span>✅</li>
              <li>
                <li style="display: flex; flex-direction: column;"><span>{{texts.option_17}}</span><strong>{{texts.option_17_ent}}</strong>
              </li>
              <li><span>{{texts.option_18}}</span>✅</li>
              <li><span>{{texts.option_19}}</span>✅</li>              
              <li style="display: flex; flex-direction: column;"><span>{{texts.support}}</span><strong>{{texts.enterprise_support}}</strong></li>
            </ul>
          </article>
        </div>
      </section>
   

    
    <hr class="hfng-divider-small" />

    <div>   
        <p class="hfng-visit-hwpress">{{texts.need_help}}<a href="https://happywpress.com" target="_blank">{{texts.visit_happywpress}}</a></p>        
    </div>
    <hr class="hfng-divider" />
</div>
