{% load static %}
{% block support_button %}

    <div class="floating-btn-container">
        <div id="divContactUs" class="my-3 px-2 py-2" style="width: 300px; background-color: #CCCCCC; border-radius: 20px;" hidden>
            <label class="px-1" style="font-size: 12px; font-weight: 500; color: #606060;">
                We will get back to you within 2 hours.
            </label>

            <input type="text" class="form-control size-12 my-2" id="firstName" name="username" placeholder="First name" required>
            <input type="text" class="form-control size-12 my-2" id="lastName" name="username" placeholder="Last name" required>
            <input type="email" class="form-control size-12 my-2" id="email" name="username" placeholder="Email" required>
            <textarea class="form-control grey-label size-12 my-2" id="message" rows="5" placeholder="How can we help..."></textarea>

            <button class="plain-btn my-2"> Message </button>
        </div>
        <button class="floating-btn no-focus-btn" style="float: right;" onclick="showDivContactUs()">
            <span class="feather-16" data-feather="mail" style="margin-right: 8px;"></span> Contact Us
        </button>
    </div>

    <script>
        showDiv = false;
        function showDivContactUs(){
            document.getElementById('divContactUs').hidden = showDiv;
            if (showDiv){
                showDiv = false;
            } else {
                showDiv = true;
            }
        }
    </script>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
    <script> feather.replace() </script>

{% endblock %}