{{!< default}} {{#tag}} <div
  x-data="{ docsLink: null, sourceLink: null, videoLink:null, showInstallLink: false, connectorTag:false, installLink: null }" x-init="
    docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; showInstallLink = window.showInstallLink; connectorTag = window.connectorTag;
    if( videoLink ) document.getElementById('tagvideo').src = videoLink; installLink = window.installLink;">

  <main class="w-default lg:my-10 space-x-0 md:space-x-6 space-y-6 flex flex-col md:flex-row items-center">
    <div class="w-full md:w-1/2">
      <div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none w-full mb-4">
        <h1 class="flex overflow-ellipsis overflow-hidden w-full max-w-full">
          <a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak
            x-show="connectorTag">
            Connectors
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
          {{name}}
        </h1>
        <p>{{description}}</p>
      </div>
      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-purple-500 dark:bg-purple-800 transition-shadow hover:shadow-xl hover:ring mr-2"
        href="#" x-show="installLink" x-cloak x-bind:href="installLink">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
        <span>Install</span>
      </a>
      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl hover:ring mr-2"
        x-show="docsLink" href="#" target="_blank" x-cloak x-bind:href="docsLink">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
        <span>Docs</span>
      </a>
      <a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl hover:ring mr-2"
        x-show="sourceLink" href="#" target="_blank" x-cloak x-bind:href="sourceLink">
        <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
            clip-rule="evenodd"></path>
        </svg>
        <span>Source</span>
      </a>
    </div>
    <div class="w-full md:w-1/2" x-show="!videoLink">
      <img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
        src="{{feature_image}}">
    </div>
    <div class="w-full md:w-1/2" x-show="videoLink">
      <div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
        <div class="h-full">
          <iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </main>



  <div class="w-default my-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto">

    {{!-- Featured posts first --}}
    {{#get "posts" filter="tag:{{slug}}+featured:true" include="authors,tags" order="published_at desc"}}
    
    {{#foreach posts visibility="all"}}
    
    {{> cardTutorial }}
    
    {{/foreach}}
    
    {{/get}}

    {{!-- Then all the rest in desc order --}}
    {{#get "posts" filter="tag:{{slug}}+featured:false" include="authors,tags" order="published_at desc" limit="50"}}

    {{#foreach posts visibility="all"}}

    {{> cardTutorial }}

    {{/foreach}}

    {{/get}}

  </div>

  <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 my-10 bg-white dark:bg-gray-900" x-cloak x-show="connectorTag">
    <div class="w-default flex content-center space-x-2 flex-wrap justify-around  mx-auto ">
      <div class="mt-2 text-center sm:text-left dark:text-gray-200">
        <h3 class="text-2xl">Have a question you need answered?</h3>
        <p>Submit your question on the forum and get help from the community.</p>
      </div>
  
      <a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
        target="_blank"
        class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
        <span class="self-center">Ask a question</span>
      </a>
    </div>
  </div>

  </div>
  {{/tag}}