{% extends "main.html" %}
{% block extrahead %}
    <link href="/static/css/tailwind.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/home.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block tabs %}
<div class="isolate overflow-hidden bg-marvin-blue flex flex-1 flex-col justify-center">
    {% include "partials/grid.html" %}

      <div class="mx-auto max-w-2xl">
        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
          <div class="relative rounded-full px-3 py-1 text-sm leading-6 bg-indigo-500/10 text-gray-400 ring-1 ring-white/10 hover:ring-white/20">
            {{config.extra.announcement.title}} <a href="{{config.extra.announcement.url}}" class="font-semibold text-white ml-2"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
          </div>
        </div>
        <div class="text-center">
          <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">{{ config.extra.hero.title }}</h1>
          <p class="mt-6 text-lg leading-8 text-gray-300">{{ config.extra.hero.description }}</p>
          <div class="mt-10 flex items-center justify-center">
            <div class="grid grid-cols-2 gap-4">
                <div class = "flex flex-shrink self-center">
                    <a href="{{ config.extra.get_started | url }}" class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">
                        Get started
                    </a>
                </div>
                <div class = "flex flex-shrink self-center">
                    <a href="{{ config.repo_url }}" class="text-sm font-semibold leading-6 text-white">
                        Star us on Github <span aria-hidden="true">→</span>
                    </a>
                </div>
                <div class = "flex justify-center col-span-2">
                    <div id = "pip" class="select-none flex items-center relative w-max text-left font-mono text-gray-500 text-xs leading-6 border-0 bg-transparent cursor-copy px-3 rounded-full">
                        pip install marvin 
                        <span id = 'pip-success' class = 'invisible ml-2' aria-hidden="true">✓</span>
                    </div>
                </div>
              </div>
            </div>
        </div>
      </div>
</div>

{% endblock %}
{% block footer %}{% endblock %}
{% block scripts %}
{{ super() }}
<script>
    document.getElementById('pip').addEventListener('click', function() {
        var text = 'pip install marvin';
        navigator.clipboard.writeText(text).catch(function(err) {
            // Handle any errors that occur during the clipboard write here
        });

        // Remove class 'invisible' from the span with id 'pip-success'
        var span = document.getElementById('pip-success');
        span.classList.remove('invisible');
    });
</script>
{% endblock %}