<div class="row"  style="width: 100%">
  <div class="col-md-2" style="border: 1px solid #cfcfcf; padding-right: 0px;padding-left: 14px;">
    <div class="py-5 content-yield">
      <div class="row">
        <div class="col-md-12">
          <div class="row" style="margin: 0">
            <div style="border-bottom: 1px solid #cfcfcf;margin: 0; padding: 0 0 10px 0;" class="col-12" align="center">
              <% if current_user.avatar? %>
                <%= image_tag(current_user.avatar_url, class: "img-round", style: "width: 100px;") %>
              <% else %>
                <img style="width: 100px;" class="img-round" src="<%= asset_path("images/avatars/profile.jpg")  %>">
              <% end %>
            </div>
          </div>
          <div align="center">
            <h4><%= _("Edit profile") %></h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-10" style="width: 100%; border: 1px solid #eee;">
    <ul style="height: 40px;border-bottom: 2px solid #145784;" class="nav nav-tabs nav_profile_edit" id="myTab" role="tablist">
      <li class="nav-item">
        <a style="height: 100%;" class="nav-link active" id="edit_profile-tab" data-toggle="tab" href="#edit_profile" role="tab" aria-controls="home_vehicle" aria-expanded="true"><%= _("Edit profile") %></a>
      </li>
      <% if !current_user.user_admin && current_user.profile == 'site user' %>
        <li class="nav-item">
          <a style="height: 100%;" class="nav-link" id="payments-tab" data-toggle="tab" href="#payments" role="tab" aria-controls="session_vehicle"><%= _("Payments") %></a>
        </li>
      <% end %>
    </ul>
    <br><br>
    <div class="tab-pane fade active show" id="edit_profile" role="tabpanel" aria-labelledby="edit_profile-tab">
      <%= form_with(model: @user, url: save_profile_user_path(@user), method: :put, html: {data: {remote: "false"}}) do |form| %>
        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :name %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :name %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :last_name %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :last_name %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :username %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :username %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :email %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.email_field :email %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :phone %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :phone %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :avatar %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.file_field :avatar %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :password %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :password %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <%= form.label :password_confirmation %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-xs-4 col-sm-12 px-7">
              <%= form.text_field :password_confirmation %>
            </div>
          </div>
        </div>

        <br>
        <div class="field">
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <button type="submit" class="btn btn-sm btn-send"><%= t("utils.send_button") %></button>
            </div>
          </div>
        </div>
      <% end %>
    </div>
    <% if !current_user.user_admin && current_user.profile == 'site user' %>
      <div class="tab-pane fade" id="payments" role="tabpanel" aria-labelledby="payments-tab">
        <%= render "payments" %>
      </div>
    <% end %>
  </div>
</div>
<br>

<script>
    $(".nav_profile_edit > li > a").click(function(){
        $("input[type='checkbox']:checked").click();
    })
</script>

<style>
  .tab-pane.fade{
    display: none;
  }
  .tab-pane.fade.active{
    display: block;
  }
</style>
