{{--@include('header')--}}
<style>
    /*body {*/

    /*    background-color: #000;*/
    /*}*/


    .card {

        width: 600px;
        border: none;
        margin: auto;
        /*width: 50%;*/
        /*border: 3px solid green;*/
        padding: 10px;
    }


    .btr {

        border-top-right-radius: 5px !important;
    }


    .btl {

        border-top-left-radius: 5px !important;
    }

    .btn-dark {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }


    .btn-dark:hover {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }


    .nav-pills {

        display: table !important;
        width: 100%;
    }

    .nav-pills .nav-link {
        border-radius: 0px;
        border-bottom: 1px solid #0d6efd40;

    }

    .nav-item {
        display: table-cell;
        background: #0d6efdfc;
    }


    .form {

        padding: 10px;
        height: 300px;
    }

    .form input {

        margin-bottom: 12px;
        border-radius: 3px;
    }


    .form input:focus {

        box-shadow: none;
    }


    .form button {

        margin-top: 20px;
    }

    .container-center-horizontal {
        min-height: 750px;
    }

    .full-height {
        height: 100%;
    }

    .right-btn {
        float: right;
    }

    .error {
        color: red;
        font-weight: bold;
        text-align: center;
    }

    #pills-tabContent{
        padding:10px;
    }



</style>
<div class="card">

    <div class="row align-center">
        <div class="col-12 margin-bottom-20">
            <button class="btn btn-outline-dark btn-mobile-font" onclick="facebook_login();"><i class="fa-brands fa-square-facebook"></i> Log in with Facebook</button>
            <button class="btn btn-mobile-font g_id_signin"><i class="fa-brands fa-google"></i> Log in with Google</button>
        </div>
        <div class="col-12">
            <hr class="or-hr"/><span class="or"> OR </span><hr  class="or-hr"/>
        </div>
    </div>

{{--    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">--}}
{{--        <li class="nav-item text-center">--}}

{{--            <a class="nav-link active btl" id="pills-home-tab" data-toggle="pill"--}}
{{--               role="tab" aria-controls="pills-home" aria-selected="true">Sign Up</a>--}}
{{--        </li>--}}
{{--    </ul>--}}
    <label class="error d_none"></label>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade active show" id="pills-profile" role="tabpanel"
             aria-labelledby="pills-profile-tab">


            <div class="form px-4">

                <input type="text" name="first_name" class="form-control form_data input-mobile-font"
                       placeholder="First Name">

                <input type="text" name="last_name" class="form-control form_data input-mobile-font" placeholder="Last Name">

                <input type="text" name="company_name" class="form-control form_data input-mobile-font"
                       placeholder="Company Name">

                <input type="email" name="email_creation" class="form-control form_data input-mobile-font"
                       placeholder="Email">

                <input type="text" name="phone" class="form-control form_data input-mobile-font" placeholder="Phone">

                <input type="password" name="password_creation" class="form-control form_data input-mobile-font"
                       placeholder="Password">

                <p>
                    By signing up, you agree to our <a href="{{URL::to("terms")}}">Terms</a>, <a href="{{URL::to("privacy")}}">Privacy Policy</a> and <a href="{{URL::to("cookies")}}">Cookies Policy</a>
                </p>

                <p>
                    Have an account? <a href="{{URL::to("login")}}">Log In</a>
                </p>

                <button class="btn btn-dark btn-block right-btn full-width submit-btn-font" onclick="sign_up('register', 'trial');">Sign Up
                </button>


            </div>


        </div>

    </div>


</div>
<script type="text/javascript">

    function check_error(element) {
        if (!$(element).hasClass("active")) {
            $(".error").html("");
            $(".error").hide();
        }
    }


</script>