<main class="main" style="padding-top:25px;">
      <div class="container">
        <div class="row">
          <section class="card">
            <nav class="nav-fill">
              <div class="nav nav-tabs" role="tablist">
                @if(Auth::user()->role_id == 3)
                <a class="nav-item nav-link active" data-toggle="tab" href="#changeNameHeading"><i class="material-icons">person</i>Personal</a>
                <a class="nav-item nav-link" data-toggle="tab" href="#skills"><i class="material-icons">build</i>Skills and experience</a>
                <a class="nav-item nav-link" data-toggle="tab" href="#questions"><i class="material-icons">question_answer</i>My answers</a>

                @else
                <a class="nav-item nav-link active" href="#changeNameHeading" data-toggle="tab"><i class="material-icons">person</i>Personal</a>
                <a class="nav-item nav-link" href="#questions" data-toggle="tab"><i class="material-icons">question_answer</i>My questions</a>
                <a class="nav-item nav-link" href="#garage" data-toggle="tab"><i class="material-icons">directions_car</i>My garage</a>
                @endif
              </div>
            </nav>
            <div class="card-body">
              <div class="tab-pane active" id="changeNameHeading">
                <div class="accordion" id="personalSettingsAccordion">
                  <div class="card card-collapse">
                    <div class="card-header" id="changeNameHeading" role="tab">
                      <h5 class="mb-0"><a data-toggle="collapse" href="#changeName" aria-expanded="true" aria-controls="changeName">Change personal information<i class="material-icons">keyboard_arrow_down</i></a></h5>
                    </div>
                    <div class="collapse show" id="changeName" aria-labelledby="changeNameHeading" data-parent="#personalSettingsAccordion">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-6 col-lg-5 col-xl-4 mr-auto">
                            <form class="form" id="changeNameForm" method="POST" action="/user/changeName" enctype="multipart/form-data">
                            	@csrf
                              <div class="bmd-form-group">
                                <div class="input-group">
                                  <div class="input-group-prepend"><span class="input-group-text"><i class="material-icons">face</i></span></div>
                                  <input class="form-control" type="text" name="username" value="{{$user->name}}">
                                </div>

                                <div class="input-group">
                                  <div class="input-group-prepend"><span class="input-group-text"><i class="material-icons">camera_alt</i></span></div>
                                  <input class="form-control" type="file" name="avatar" value="">
                                </div>
                                @if(Auth::user()->role_id == 3)
                                <div class="input-group">
                                  <div class="input-group-prepend"><span class="input-group-text"><i class="material-icons">description</i></span></div>
                                  <textarea class="form-control" name="about">{{Auth::user()->about}}</textarea>
                                </div>
                                @endif
                              </div>
                              <div class="card-footer justify-content-center">
                                <button class="btn btn-primary" type="submit">Save information</button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card card-collapse">
                    <div class="card-header" id="changePassHeading" role="tab">
                      <h5 class="mb-0"><a data-toggle="collapse" href="#changePass" aria-expanded="false" aria-controls="changePass">Change password<i class="material-icons">keyboard_arrow_down</i></a></h5>
                    </div>
                    <div class="collapse" id="changePass" aria-labelledby="changePassHeading" data-parent="#personalSettingsAccordion">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-6 col-lg-5 col-xl-4 mr-auto">
		                    <form method="POST" action="{{ route('password.update') }}">
		                        @csrf

		                        <input type="hidden" name="token" value="{{ $token }}">

		                        <div class="form-group row">
		                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

		                            <div class="col-md-6">
		                                <input id="email" type="hidden" value="{{$user->email}}" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>

		                                @if ($errors->has('email'))
		                                    <span class="invalid-feedback" role="alert">
		                                        <strong>{{ $errors->first('email') }}</strong>
		                                    </span>
		                                @endif
		                            </div>
		                        </div>

		                        <div class="form-group row">
		                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

		                            <div class="col-md-6">
		                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

		                                @if ($errors->has('password'))
		                                    <span class="invalid-feedback" role="alert">
		                                        <strong>{{ $errors->first('password') }}</strong>
		                                    </span>
		                                @endif
		                            </div>
		                        </div>

		                        <div class="form-group row">
		                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

		                            <div class="col-md-6">
		                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
		                            </div>
		                        </div>

		                        <div class="form-group row mb-0">
		                            <div class="col-md-6 offset-md-4">
		                                <button type="submit" class="btn btn-primary">
		                                    {{ __('Reset Password') }}
		                                </button>
		                            </div>
		                        </div>
		                    </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="skills">
                Skills
              </div>

              <div class="tab-pane fade" id="questions">
                Answers
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>