{% extends 'base/layout.html' %}
{% load static %}

{% block content %}
    <head>
        <title>Font Awesome Icons</title>
        <!-- Add the Font Awesome CSS link in the head section -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    </head>
    <br>
    <h1 align="center">
        {{ title }}
    </h1>
    <br>
    <div class="row">
        <div class="col col-12 col-xl-6">
            <div class="card">
                <div align="center">
                    <br>
                    <a target="_blank" href="https://discord.gg/9N3V4mpMXU"> 
                        <img src="{% static 'netbox_proxbox/discord.png' %}" alt="Discord Logo" width="50rem">
                    </a>
                </div>
                <div class="card-body">
                    <table class="table table-hover attr-table">
                        <tr>
                            <th scope="row"><strong>English (en)</strong></th>
                            <td>Join our Discord Community</td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Português (pt-br)</strong></th>
                            <td>Participe de nossa comunidade no Discord</td>
                        </tr>
                    </table>
                    <div align="right">
                        <button class="btn btn-purple" type="button">
                            <a
                                style="text-decoration: none; color: inherit"
                                target="_blank"
                                href="https://t.me/netboxbr"
                            >Discord Community
                            <i class="fa-brands fa-discord fa-shake" style="color: #ffffff;"></i>
                        </a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 col-xl-6">
            <div class="card">
                <div align="center">
                    <br>
                    <a href="https://t.me/netboxbr" target="_blank">
                        <img src="{% static 'netbox_proxbox/telegram.png' %}" alt="Telegram Logo" width="50rem">
                    </a>
                </div>
                <div class="card-body">
                    <table class="table table-hover attr-table">
                        <tr>
                            <th scope="row"><strong>English (en)</strong></th>
                            <td>Join our Telegram Community</td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Português (pt-br)</strong></th>
                            <td>Participe de nossa comunidade no Telegram</td>
                        </tr>
                    </table>
                    <div align="right">
                        <button class="btn btn-primary" type="button">
                            <a
                                style="text-decoration: none; color: inherit"
                                target="_blank"
                                href="https://t.me/netboxbr"
                            >Telegram Community
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                height="1em"
                                viewBox="0 0 496 512">
                                <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffffff}</style><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/>
                            </svg>
                        </a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 col-xl-6">
            <div class="card">
                <div align="center">
                    <br>
                    <a target="_blank" href="https://github.com/netdevopsbr"> 
                        <img src="{% static 'netbox_proxbox/github.png' %}" alt="Discord Logo" width="50rem">
                    </a>
                </div>
                <div class="card-body">
                    <table class="table table-hover attr-table">
                        <tr>
                            <th scope="row"><strong>English (en)</strong></th>
                            <td>Know more about <strong>@netdevopsbr</strong> and other <strong>opensource projects</strong></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Português (pt-br)</strong></th>
                            <td>Saiba mais sobre a <strong>@netdevopsbr</strong> e outros <strong>projetos opensource</strong></td>
                        </tr>
                    </table>
                    <div>
                        
                    </div>
                    <div align="right">
                        <button class="btn btn-black" type="button">
                            <a
                                style="text-decoration: none; color: inherit"
                                target="_blank"
                                href="https://github.com/netdevopsbr"
                                >@netdevopsbr
                                <i class="fa-brands fa-github fa-shake" style="color: #ffffff;"></i>
                            </a>
                        </button>
                        <button class="btn btn-black" type="button">
                            <a
                                style="text-decoration: none; color: inherit"
                                target="_blank"
                                href="https://github.com/emersonfelipesp"
                            >@emersonfelipesp
                            <i class="fa-brands fa-github fa-shake" style="color: #ffffff;"></i>
                        </a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 col-xl-6">
            <div class="card">
                <div align="center">
                    <br>
                    <a href="https://www.linkedin.com/in/emersonfelipesp/" target="_blank">
                        <img src="{% static 'netbox_proxbox/linkedin.png' %}" alt="Telegram Logo" width="50rem">
                    </a>
                </div>
                <div class="card-body">
                    <table class="table table-hover attr-table">
                        <tr>
                            <th scope="row"><strong>English (en)</strong></th>
                            <td>Would you like to know more about my work? <strong>Follow or connect with me!</strong></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Português (pt-br)</strong></th>
                            <td>Gostaria de saber mais sobre o meu trabalho? <strong>Me siga ou conecte-se comigo!</strong></td>
                        </tr>
                    </table>
                    <div align="right">
                        <button class="btn btn-primary" type="button">
                            <a
                                style="text-decoration: none; color: inherit"
                                target="_blank"
                                href="https://t.me/netboxbr"
                            >Follow/Connect
                            <i class="fa-brands fa-linkedin fa-shake" style="color: #ffffff;"></i>
                        </a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}