{% extends "base.html" %}

{% block content %}

    <div class="flex-grow-1" id="waterContainer">
        <div id="drop"></div>
        <div id="wave"></div>
    </div>

<!-- <h2 class="h1 p-4">
    This is the home page, there is no content here right now
</h2> -->

<!-- 
<div class="py-5 bg-body mt-5">
        <div class="container">
            <div class="text-center mb-4">
                <h1 class="fw-light text-white mt-5 pb-5 mb-5 bg-body text-body d-inline-block">
                    &ThickSpace; Angling Trust Results &ThickSpace;
                    <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                </h1>
            </div>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4 justify-contentpaper">
                
                <div class="col">
                    <a href="{% url 'anglers' %}" class="text-decoration-none text-body">
     
                        <div class="fluid-hover-zoom d-flex flex-wrap justify-content-center shadow-sm md-shadow on-hover bg-body-tertiary rounded text-center p-5 h-100">
                            <h3 class="h2 w-100">
                                Angler Management
                                <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                            </h3>
                            <p class="mt-3">
                                Create and manage all members, teams and sections of an event
                            </p>
                            <button class="btn btn-lg btn-company mt-3 px-4 ">
                                Visit Member Management
                            </button>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{% url 'scoreboard' %}" class="text-decoration-none text-body">
     
                        <div class="fluid-hover-zoom d-flex flex-wrap justify-content-center shadow-sm md-shadow on-hover bg-body-tertiary rounded text-center p-5 h-100">
                            <h3 class="h2 w-100">
                                Live Scoreboard
                                <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                            </h3>
                            <p class="mt-3">
                                View a live scoreboard of the event, good for a dedicated scoreboard display
                            </p>
                            <button class="btn btn-lg btn-company mt-3 px-4 mt-auto">
                                Visit Live Scoreboard
                            </button>
                        </div>
                    </a>
                </div>

                <div class="col">
                    <a href="{% url 'results' %}" class="text-decoration-none text-body">
        
                        <div class="fluid-hover-zoom d-flex flex-wrap justify-content-center shadow-sm md-shadow on-hover bg-body-tertiary rounded text-center p-5 h-100">
                            <h3 class="h2 w-100">
                                Competition Results
                                <div class="border-company border-bottom border-2 w-100 pt-1"></div>
                            </h3>
                            <p class="mt-3">
                                An organised output of the competition outcome and member performance
                            </p>
                            <button class="btn btn-lg btn-company mt-3 px-4 mt-auto">
                                Visit Competition Results
                            </button>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div> -->
{% endblock content %}
