<!DOCTYPE html>
<html lang="en-GB">
<head>
    {% include 'layouts/_shared_head.html' %}
    
    {% block page_head %}{% endblock %}
</head>
<body data-page="{{ model.hash_page_current }}">
    <div class="topnav">
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_LOGO }}"> 
            <img class="{{ model.FLAG_LOGO }}" src="{{ url_for('static', filename='images/logo.webp') }}" alt="Shuffle And Skirmish logo" aria-label="Shuffle And Skirmish logo" tabindex="0">
        </div>
        <div class="nav-links">
            {% block page_nav_links %}{% endblock %}
        </div>
        {% include 'layouts/_shared_header.html' %}
    </div>

    <!-- Body -->
    <div  id="{{ model.ID_PAGE_BODY }}">
        {% block page_body %}{% endblock %}
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="{{ model.FLAG_CONTAINER }}">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>{{ model.NAME_COMPANY }}</h3>
                    <p>Company Number: {{ model.COMPANY_NUMBER }}</p>
                    <p>Registered in England and Wales</p>
                    <p>Registered Office: {{ model.COMPANY_ADDRESS_SHORT }}</p>
                </div>
                
                <div class="footer-section">
                    <h3>Legal</h3>
                    <ul>
                        <li><a href="{{ model.HASH_PAGE_PRIVACY_POLICY }}">Privacy Policy</a></li>
                        <li><a href="{{ model.HASH_PAGE_ACCESSIBILITY_STATEMENT }}">Accessibility Statement</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-content">
            <div class="footer-section contact">
                <h3>Contact</h3>
                <!--
                <ul>
                    <li><a href="mailto:{{ model.get_mail_contact_public() }}">Email: {{ model.get_mail_contact_public() }}</a></li>
                    <li><a href="{{ model.URL_DISCORD }}">Discord: {{ model.USERNAME_DISCORD }}</a></li>
                    < !-- <li><a href="{{ model.URL_FACEBOOK }}">Facebook: {{ model.USERNAME_FACEBOOK }}</a></li> -- >
                    <li><a href="{{ model.URL_GITHUB }}">GitHub: {{ model.USERNAME_GITHUB }}</a></li>
                    <li><a href="{{ model.URL_INSTAGRAM }}">Instagram: {{ model.USERNAME_INSTAGRAM }}</a></li>
                </ul>
            </div>

            <div class="footer-section contact">
                <h3 style="color: #1f2937;">Contact</h3>
                <ul>
                    < !-- <li>Phone</li> -- >
                    < !-- <li><a href="{{ model.URL_LINKEDIN }}">LinkedIn: {{ model.USERNAME_LINKEDIN }}</a></li> -- >
                    <li><a href="{{ model.URL_REDDIT }}">Reddit: {{ model.USERNAME_REDDIT }}</a></li>
                    <li><a href="{{ model.URL_TIKTOK }}">TikTok: {{ model.USERNAME_TIKTOK }}</a></li>
                    <li><a href="{{ model.URL_TWITTER }}">Twitter: {{ model.USERNAME_TWITTER }}</a></li>
                </ul>
                -->
                <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="mailto:{{ model.get_mail_contact_public() }}"><strong>Email:</strong> {{ model.get_mail_contact_public() }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_DISCORD }}"><strong>Discord:</strong> {{ model.USERNAME_DISCORD }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_FACEBOOK }}"><strong>Facebook:</strong> {{ model.USERNAME_FACEBOOK }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_GITHUB }}"><strong>GitHub:</strong> {{ model.USERNAME_GITHUB }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_INSTAGRAM }}"><strong>Instagram:</strong> {{ model.USERNAME_INSTAGRAM }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_LINKEDIN }}"><strong>LinkedIn:</strong> {{ model.USERNAME_LINKEDIN }}</a></div>
                    <!-- <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><strong>Phone:</strong> {{ model.PHONE_NUMBER_CONTACT_PUBLIC }}</div> -->
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_REDDIT }}"><strong>Reddit:</strong> {{ model.USERNAME_REDDIT }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_TIKTOK }}"><strong>TikTok:</strong> {{ model.USERNAME_TIKTOK }}</a></div>
                    <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_TWITTER }}"><strong>Twitter:</strong> {{ model.USERNAME_TWITTER }}</a></div>
                    <!-- <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_YOUTUBE }}"><strong>Youtube:</strong> {{ model.USERNAME_YOUTUBE }}</a></div> -->
                </div>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; {{ current_year }} {{ model.NAME_COMPANY }}. <a href="{{ model.HASH_PAGE_LICENSE }}" alt="License" aria-label="License">All rights reserved.</a></p>
        </div>
    </div>
    </footer>
    
    {% include 'layouts/_shared_scripts.html' %}
    {% include 'layouts/_shared_mtg_scripts.html' %}
    <script src="{{ url_for('static', filename='dist/js/main.bundle.js') }}"></script>
</body>
</html>
