<div class="container-fluid bg-dark text-white">
    <div class="container" style="padding-top: 60px; padding-bottom: 60px;">
        <div class="row justify-content-center">
            <div class="col-9">
                <h2 class="text-center">Contact</h2>
                <p class="lead">Send me direct message and I will get in touch as quick as possible.</p>
                <div v-show="contactMessageSuccess" style="height: 170px;">
                    <div class="alert alert-success fade show" role="alert">
                        Your message has been sent successfully!
                        <button type="button" class="close" aria-label="Close"
                        v-on:click="resetContactForm()">
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div v-show="contactMessageError" style="height: 170px;">
                    <div class="alert alert-danger fade show" role="alert">
                        There was an error sending your message.
                        <button type="button" class="close" aria-label="Close" 
                        v-on:click="resetContactForm()">
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <form @submit.prevent v-show="!contactMessageSuccess && !contactMessageError">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-4">
                              <input type="text" class="form-control" placeholder="Name" required v-model="contactMessage.name">
                            </div>
                            <div class="col-4">
                              <input type="text" class="form-control" placeholder="Email" required v-model="contactMessage.email">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control " id="validationTextarea" placeholder="Write a Message here" required v-model="contactMessage.content"></textarea>
                    </div>
                    <button v-on:click="sendMessage(contactMessage)"
                    type="submit" class="btn btn-outline-success">
                        Send
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>