{{!< ../default}} <div class="relative group index-header large">
  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background
  image--}}
  <div class="w-full h-full opacity-50 bg-black">
  </div>
  </div>
  <div class="absolute left-0 right-0 top-4 bottom-0 flex flex-row items-center justify-center">
    <div class="container mx-auto content-full">
      <div class="text-white">
        <div>
          {{#if @member.paid}}
          {{!-- Logged in, paying member: Redirect home --}}
          <script>window.location = '{{@site.url}}';</script>
          {{else if @member}}
          <h1 class="text-2xl md:text-4xl">
            Join The Damillora Network
          </h1>
          <p class="text-lg md:text-xl">Become an Autonomous System member</p>
          <p>By subscribing as an Autonomous System, you can get additional benefits and support me at the same time!
          </p>

          {{else}}
          <h1 class="text-2xl md:text-4xl">Subscribe to {{@site.title}}</h1>
          <p>Get the latest posts delivered straight to your inbox.</p>
          <form id="subscribe-form" data-members-form="subscribe">
            <div class="py-8">
              <label class="text-sm">Email address</label>
              <input type="email" data-members-email
                class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
            </div>
            <button id="subscribe-submit" type="submit"
              class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
              Subscribe
            </button>
            <div class="message-success">
              <p>Please check your email inbox to confirm your subscription!</p>
            </div>
            <div class="message-error">
              <p>Please enter a valid email address!</p>
            </div>
          </form>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
  </div>

  <article class="post-article">
    <main class="content container" id="post">
      <div class="content-full">
        {{#if @member}}
        <h1 class="text-red-500">Access disabled. Required infrastructure not yet in place.</h1>
        <div class="md:flex md:flex-row pointer-events-none opacity-50">
          <div class="md:w-1/2 md:pr-4">
            <h2 class="text-xl md:text-2xl text-center">Monthly</h2>
            <ul class="text-center pt-4 list-disc md:h-64">
              <li><strong>Autonomous System</strong> role in <a href="//nanao.moe/discord">The Network Discord
                  server</a>.</li>
              <li><strong>Full access to posts</strong> in <a href="{{@site.url}}">{{@site.title}}</a>, including
                members-only posts!</li>
              <li><strong>Access to exclusive content</strong> in <a href="//nanao.moe/channel">my YouTube channel</a>.
              </li>
              <li><strong>Help shape the future</strong> of my content!</li>
              <li><strong>More</strong> coming soon!</li>
            </ul>
            <p class="text-xl md:text-2xl text-center pt-4">
              <span class="uppercase">{{@price.currency}}</span> <strong>{{@price.monthly}}</strong>
            </p>
            <div class="flex justify-center pt-2">
              <a class="px-4 py-2  border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out text-white"
                href="javascript:" data-members-plan="Monthly">Choose this plan</a>
            </div>
          </div>
          <div class="md:w-1/2 md:pl-4">
            <h2 class="text-xl md:text-2xl text-center">Yearly</h2>
            <ul class="text-center pt-4 list-disc md:h-64">
              <li><strong>Everything</strong> in the Monthly plan.</li>
              <li><strong>Two months</strong> free!</li>
              <li><strong>More</strong> coming soon!</li>
            </ul>
            <p class="text-xl md:text-2xl text-center pt-4">
              <span class="uppercase">{{@price.currency}}</span> <strong>{{@price.yearly}}</strong>
            </p>
            <div class="flex justify-center pt-2">
              <a class="px-4 py-2 border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out text-white"
                href="javascript:" data-members-plan="Yearly">Choose this plan</a>
            </div>
          </div>
        </div>
        {{else}}
        {{#page}}
        {{content}}
        {{/page}}
        {{/if}}
      </div>
    </main>
  </article>
  {{#contentFor "scripts"}}
  <script>
    $(document).ready(function () {
      // FitVids - start
      var $postContent = $("#post");
      $postContent.fitVids();
      // FitVids - end
    });
  </script>
  {{/contentFor}}