<div class="content d-flex justify-content-center align-items-center pt-0">

    {{--login--}}
    <form class="login-form" action="index.html">
        <div class="card mb-0">
            <div class="card-body">
                <div class="text-center mb-3">
                    <i class="icon-lock2 icon-2x text-slate-300 border-slate-300 border-3 rounded-round p-3 mb-3 mt-1"></i>
                    <h5 class="mb-0">Login</h5>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="text" class="form-control" placeholder="Username" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAV9JREFUOBGVVLuKg0AUvcpCQiB/sAuCYBNMYWtrs0Gwyi+s4E8k4kdItrHKL8h+h612uwRsBDtTiDtnYmbHxTy8kMx9nHP0zr2ohGH43nXdgf3e6AlTFOWbwT72+/0X4OoUMgj9gz7hwyDw1JMv8Mu/zFHlwiN/sViQYRgD2CQBTdPIcZxxgfl8Lgqz2YzYZYlYrolk77zgdF2XLMui4/FIVVVREAR0Op0oSZJB7T8Z8aQWxgSU3W7XoYDXbJqGY9DC+Xwew4sca/GHBb54gysZiEdkYNgoX9lxEAJI3rPtdkts+0jXdQGDyFMCpmnSarUSRNlR+92WcwN/uVzSZrPhUxkU+gAC/j0Rz/OormvK85xTsI2y/W2LnGX+dTroW7a2bSmKIpHiiySiESeOY55dr9dk2zalaTpA3RTAnHHLZVlyQpZlvJWiKIQAMDcFGAp3gw8N5k0QuoohBpkd/i9CoHzgkM8LEwAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: pointer;">
                    <div class="form-control-feedback">
                        <i class="icon-user text-muted"></i>
                    </div>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="password" class="form-control" placeholder="Password" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAV9JREFUOBGVVLuKg0AUvcpCQiB/sAuCYBNMYWtrs0Gwyi+s4E8k4kdItrHKL8h+h612uwRsBDtTiDtnYmbHxTy8kMx9nHP0zr2ohGH43nXdgf3e6AlTFOWbwT72+/0X4OoUMgj9gz7hwyDw1JMv8Mu/zFHlwiN/sViQYRgD2CQBTdPIcZxxgfl8Lgqz2YzYZYlYrolk77zgdF2XLMui4/FIVVVREAR0Op0oSZJB7T8Z8aQWxgSU3W7XoYDXbJqGY9DC+Xwew4sca/GHBb54gysZiEdkYNgoX9lxEAJI3rPtdkts+0jXdQGDyFMCpmnSarUSRNlR+92WcwN/uVzSZrPhUxkU+gAC/j0Rz/OormvK85xTsI2y/W2LnGX+dTroW7a2bSmKIpHiiySiESeOY55dr9dk2zalaTpA3RTAnHHLZVlyQpZlvJWiKIQAMDcFGAp3gw8N5k0QuoohBpkd/i9CoHzgkM8LEwAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: pointer;">
                    <div class="form-control-feedback">
                        <i class="icon-lock2 text-muted"></i>
                    </div>
                </div>
                <div class="form-group d-flex align-items-center">
                    <div class="form-check mb-0">
                        <label class="form-check-label">
                            <div class="uniform-checker"><span class="checked"><input type="checkbox" name="remember" class="form-input-styled" checked="" data-fouc=""></span></div>
                            Remember
                        </label>
                    </div>
                    <a href="login_password_recover.html" class="ml-auto">Forgot password?</a>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Sign in <i class="icon-circle-right2 ml-2"></i></button>
                </div>
                <div class="form-group text-center text-muted content-divider">
                    <span class="px-2">Don't have an account?</span>
                </div>
                <div class="form-group">
                    <a href="#" class="btn btn-light btn-block">Register</a>
                </div>
            </div>
        </div>
    </form>

    {{-- register --}}
    <form class="login-form" action="index.html">
        <div class="card mb-0">
            <div class="card-body">
                <div class="text-center mb-3">
                    <i class="icon-plus3 icon-2x text-success border-success border-3 rounded-round p-3 mb-3 mt-1"></i>
                    <h5 class="mb-0">Register</h5>
                </div>
                <div class="form-group text-center text-muted content-divider">
                    <span class="px-2">credentials</span>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="text" class="form-control" placeholder="Username" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
                    <div class="form-control-feedback">
                        <i class="icon-user-check text-muted"></i>
                    </div>
                    <span class="form-text text-danger"><i class="icon-cancel-circle2 mr-2"></i> This username is already taken</span>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="password" class="form-control" placeholder="Password" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACIUlEQVQ4EX2TOYhTURSG87IMihDsjGghBhFBmHFDHLWwSqcikk4RRKJgk0KL7C8bMpWpZtIqNkEUl1ZCgs0wOo0SxiLMDApWlgOPrH7/5b2QkYwX7jvn/uc//zl3edZ4PPbNGvF4fC4ajR5VrNvt/mo0Gr1ZPOtfgWw2e9Lv9+chX7cs64CS4Oxg3o9GI7tUKv0Q5o1dAiTfCgQCLwnOkfQOu+oSLyJ2A783HA7vIPLGxX0TgVwud4HKn0nc7Pf7N6vV6oZHkkX8FPG3uMfgXC0Wi2vCg/poUKGGcagQI3k7k8mcp5slcGswGDwpl8tfwGJg3xB6Dvey8vz6oH4C3iXcFYjbwiDeo1KafafkC3NjK7iL5ESFGQEUF7Sg+ifZdDp9GnMF/KGmfBdT2HCwZ7TwtrBPC7rQaav6Iv48rqZwg+F+p8hOMBj0IbxfMdMBrW5pAVGV/ztINByENkU0t5BIJEKRSOQ3Aj+Z57iFs1R5NK3EQS6HQqF1zmQdzpFWq3W42WwOTAf1er1PF2USFlC+qxMvFAr3HcexWX+QX6lUvsKpkTyPSEXJkw6MQ4S38Ljdbi8rmM/nY+CvgNcQqdH6U/xrYK9t244jZv6ByUOSiDdIfgBZ12U6dHEHu9TpdIr8F0OP692CtzaW/a6y3y0Wx5kbFHvGuXzkgf0xhKnPzA4UTyaTB8Ph8AvcHi3fnsrZ7Wore02YViqVOrRXXPhfqP8j6MYlawoAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
                    <div class="form-control-feedback">
                        <i class="icon-user-lock text-muted"></i>
                    </div>
                </div>
                <div class="form-group text-center text-muted content-divider">
                    <span class="px-2">contacts</span>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="password" class="form-control" placeholder="E-Mail" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACIUlEQVQ4EX2TOYhTURSG87IMihDsjGghBhFBmHFDHLWwSqcikk4RRKJgk0KL7C8bMpWpZtIqNkEUl1ZCgs0wOo0SxiLMDApWlgOPrH7/5b2QkYwX7jvn/uc//zl3edZ4PPbNGvF4fC4ajR5VrNvt/mo0Gr1ZPOtfgWw2e9Lv9+chX7cs64CS4Oxg3o9GI7tUKv0Q5o1dAiTfCgQCLwnOkfQOu+oSLyJ2A783HA7vIPLGxX0TgVwud4HKn0nc7Pf7N6vV6oZHkkX8FPG3uMfgXC0Wi2vCg/poUKGGcagQI3k7k8mcp5slcGswGDwpl8tfwGJg3xB6Dvey8vz6oH4C3iXcFYjbwiDeo1KafafkC3NjK7iL5ESFGQEUF7Sg+ifZdDp9GnMF/KGmfBdT2HCwZ7TwtrBPC7rQaav6Iv48rqZwg+F+p8hOMBj0IbxfMdMBrW5pAVGV/ztINByENkU0t5BIJEKRSOQ3Aj+Z57iFs1R5NK3EQS6HQqF1zmQdzpFWq3W42WwOTAf1er1PF2USFlC+qxMvFAr3HcexWX+QX6lUvsKpkTyPSEXJkw6MQ4S38Ljdbi8rmM/nY+CvgNcQqdH6U/xrYK9t244jZv6ByUOSiDdIfgBZ12U6dHEHu9TpdIr8F0OP692CtzaW/a6y3y0Wx5kbFHvGuXzkgf0xhKnPzA4UTyaTB8Ph8AvcHi3fnsrZ7Wore02YViqVOrRXXPhfqP8j6MYlawoAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
                    <div class="form-control-feedback">
                        <i class="icon-mention text-muted"></i>
                    </div>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-left">
                    <input type="password" class="form-control" placeholder="Phone number" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACIUlEQVQ4EX2TOYhTURSG87IMihDsjGghBhFBmHFDHLWwSqcikk4RRKJgk0KL7C8bMpWpZtIqNkEUl1ZCgs0wOo0SxiLMDApWlgOPrH7/5b2QkYwX7jvn/uc//zl3edZ4PPbNGvF4fC4ajR5VrNvt/mo0Gr1ZPOtfgWw2e9Lv9+chX7cs64CS4Oxg3o9GI7tUKv0Q5o1dAiTfCgQCLwnOkfQOu+oSLyJ2A783HA7vIPLGxX0TgVwud4HKn0nc7Pf7N6vV6oZHkkX8FPG3uMfgXC0Wi2vCg/poUKGGcagQI3k7k8mcp5slcGswGDwpl8tfwGJg3xB6Dvey8vz6oH4C3iXcFYjbwiDeo1KafafkC3NjK7iL5ESFGQEUF7Sg+ifZdDp9GnMF/KGmfBdT2HCwZ7TwtrBPC7rQaav6Iv48rqZwg+F+p8hOMBj0IbxfMdMBrW5pAVGV/ztINByENkU0t5BIJEKRSOQ3Aj+Z57iFs1R5NK3EQS6HQqF1zmQdzpFWq3W42WwOTAf1er1PF2USFlC+qxMvFAr3HcexWX+QX6lUvsKpkTyPSEXJkw6MQ4S38Ljdbi8rmM/nY+CvgNcQqdH6U/xrYK9t244jZv6ByUOSiDdIfgBZ12U6dHEHu9TpdIr8F0OP692CtzaW/a6y3y0Wx5kbFHvGuXzkgf0xhKnPzA4UTyaTB8Ph8AvcHi3fnsrZ7Wore02YViqVOrRXXPhfqP8j6MYlawoAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
                    <div class="form-control-feedback">
                        <i class="icon-mention text-muted"></i>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Register <i class="icon-circle-right2 ml-2"></i></button>
                </div>
                <div class="form-group text-center text-muted content-divider">
                    <span class="px-2">Already have an account?</span>
                </div>
                <div class="form-group">
                    <a href="#" class="btn btn-light btn-block">Login</a>
                </div>
            </div>
        </div>
    </form>

    <form class="login-form" action="index.html">
        <div class="card mb-0">
            <div class="card-body">
                <div class="text-center mb-3">
                    <i class="icon-link icon-2x text-warning border-warning border-3 rounded-round p-3 mb-3 mt-1"></i>
                    <h5 class="mb-0">Login Link</h5>
                    <span class="d-block text-muted">A login link will be sent to your E-Mail.</span>
                </div>
                <div class="form-group form-group-feedback form-group-feedback-right">
                    <input type="email" class="form-control" placeholder="E-Mail">
                    <div class="form-control-feedback">
                        <i class="icon-mail5 text-muted"></i>
                    </div>
                </div>
                <button type="submit" class="btn bg-blue btn-block">Send Link <i class="icon-circle-right2 ml-2"></i></button>
            </div>
        </div>
    </form>

{{--  for change password icon ->  icon-key--}}

</div>





{{--auth start--}}
{{--<div class="content d-flex justify-content-center align-items-center">--}}
{{--    <div class="wmin-sm-400">--}}
{{--        <div class="card mb-0">--}}

{{--            --}}{{-- auth tab start--}}
{{--            <ul class="nav nav-tabs nav-justified mb-0">--}}

{{--                --}}{{-- auth tab--}}
{{--                <li class="nav-item"><a href="#tab1" class="nav-link border-y-0 @if(isset($active)) active @endif" data-toggle="tab"><h6>Tab 1</h6></a></li>--}}
{{--                <li class="nav-item"><a href="#tab2" class="nav-link border-y-0 @if(isset($active)) active @endif" data-toggle="tab"><h6>Tab 2</h6></a></li>--}}

{{--            </ul> --}}{{-- auth tab stop--}}

{{--            --}}{{-- auth tab content start --}}
{{--            <div class="tab-content card-body">--}}


{{--                --}}{{-- auth body start --}}
{{--                <div class="tab-pane fade @if(isset($active)) active show @endif" id="tab1">--}}
{{--                    <div class="authentification-body">--}}
{{--                        <div class="text-center mb-3">--}}
{{--                            <h5 class="mb-0">{{ $tabTitle ?? 'Tab 1' }}</h5>--}}
{{--                        </div>--}}

{{--                        TAB 1--}}

{{--                </div></div> --}}{{-- auth body stop --}}


{{--                --}}{{-- auth body start --}}
{{--                <div class="tab-pane fade @if(isset($active)) active show @endif" id="tab2">--}}
{{--                    <div class="authentification-body">--}}
{{--                        <div class="text-center mb-3">--}}
{{--                            <h5 class="mb-0">{{ $tabTitle ?? 'Tab 2' }}</h5>--}}
{{--                        </div>--}}

{{--                        TAB 2--}}

{{--                </div></div> --}}{{-- auth body stop --}}


{{--                --}}{{-- auth body start --}}
{{--                <div class="tab-pane fade @if(isset($active)) active show @endif" id="tab3">--}}
{{--                    <div class="authentification-body">--}}
{{--                        <div class="text-center mb-3">--}}
{{--                            <h5 class="mb-0">{{ $tabTitle ?? 'Tab 3' }}</h5>--}}
{{--                        </div>--}}

{{--                        TAB 2--}}

{{--                    </div></div> --}}{{-- auth body stop --}}


{{--            </div> --}}{{-- auth tab content stop --}}

{{--        </div></div></div> --}}{{-- auth stop--}}