{% extends "layout.html" %}

{% set title = 'Sign up' %}

{% set layout = 'layout' %}

{% set body = 'register cover' %}

{% block content %}

<section class="sec-pad sign">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-5 col-md-7">
                <div class="sign-block">
                    <h3 class="text-upper text-bold no-margin bb pbmd d-inline mbxxlg">Sign up</h3>
                    <div class="wizard tab-g">
                        <div class="wizard-inner">
                            <ul class="nav nav-tabs" role="tablist" style="display: none">
                                <li role="presentation" class="active">
                                    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"></a>
                                </li>
                                <li role="presentation" class="disabled">
                                    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"></a>
                                </li>
                            </ul>
                        </div>
                        <form role="form">
                            <div class="tab-content">
                                <div class="tab-pane active" role="tabpanel" id="step1">
                                    <form action="">
                                        <input type="text" class="mblg" placeholder="Name">
                                        <input type="number" class="mblg" placeholder="Phone">
                                        <input type="email" class="mblg" placeholder="Email">
                                        <input type="password" class="mblg" placeholder="Password">
                                        <span class="d-block">
                                            * Password must be minimum 6 characters, alphanumeric only!
                                        </span>
                                        <span class="d-block">
                                            * All fields are mandatory!
                                        </span>
                                        <button class="btn btn-black width100 mtlg text-upper next-step">Continue</button>
                                        <div class="checkbox-custom mtlg">
                                            <input type="checkbox" name="agree" value="agree" id="agree" class="form-radio">
                                            <label class="mrlg" for="agree">i have read and accepted the <a href="terms.html" class="text-bold">terms and conditions</a></label>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" role="tabpanel" id="step2">
                                    <form action="">
                                        <input type="text" id="datepicker" class="mblg" placeholder="Date of Birth ( DD/MM/YYYY )" required>
                                        <div class="mblg">
                                            <div class="custom-select">
                                                <select id="gender" name="gender">
                                                    <option value="">Gender</option>
                                                    <option value="Male">Male</option>
                                                    <option value="Female">Female</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mblg">
                                            <div class="custom-select">
                                                <select id="height" name="height">
                                                    <option value="">Height</option>
                                                    <option value="">option</option>
                                                    <option value="">option</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mblg">
                                            <div class="custom-select">
                                                <select id="weight" name="weight" required>
                                                    <option value="">Weight</option>
                                                    <option value="">option</option>
                                                    <option value="">option</option>
                                                </select>
                                            </div>
                                        </div>
                                        <button class="btn btn-black width100 mtlg text-upper">Sign up</button>
                                    </form>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}