<div class="row m-0">
    <div class="col-md-6 mx-auto">
        <div class="create-wordle text-center">
            <div class="wordle-game-generator">
                <div class="alert-container hide">
                    <span id="errorMsg"></span>
                </div>
                <form id="create-wordle-form">
                    <img src="/assets/images/wordle.png" alt="wordswithletters" style="width:35px; height:35px;">
                    <h3 class="font-weight-bolder mt-4">Make your own wordle</h3>
                    <input id="cstmword" autocomplete="off" type="text" class="form-control custom-word"
                        placeholder="Enter Up to 5 Letters?" name="custom-word" required maxlength="5">
                    <input id="generate_link" value="Generate Link" type="submit" class="btn generate-word-game-link">
                    <!-- <span class="open-popup" data-toggle="modal" data-target="#exampleModal"></span> -->
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal modalWrapper" id="exampleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-3">
                <button onclick="closeModal()" id="close-btn" aria-label="close-btn" type="button" class="close" data-dismiss="modal">
                    <span class="times-icon">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center" style="padding:5rem 0">
                <div class="wordle-game-play-links">
                    <a style="font-size: 13px;" class="wordle-game-link"></a>
                    <br><br>
                    <a id="wordle-play-button" class="btn game-play-btn mt-2">Play Game</a>
                    <button id="copy-btn" aria-label="copy-btn" type="button" class="btn copy-btn mt-2">Copy
                        Link</button>
                    <h3 class="font-weight-bolder mt-5">Share this wordle with your friends</h3>
                    <div class="social-sharing-icons d-flex">
                        <a class="facebook-share-link" target="_blank">
                            <img class="share-icon" src="/assets/images/facebooks.svg" alt="facebook-share">
                        </a>
                        <a class="twitter-share-link" target="_blank">
                            <img class="share-icon" src="/assets/images/twitters.svg" alt="twitter-share">
                        </a>

                        <a class="whatsapp-share-link" data-action="share/whatsapp/share" target="_blank"><img
                                class="share-icon" src="/assets/images/whatsapp.svg" alt="whatsapp-share"> </a>


                    </div>
                    <!-- <button type="button" class="btn btn-primary">Play Random Word</button> -->
                </div>
            </div>
        </div>
    </div>
</div>