{% extends 'base.html' %}

      {% block content %}

      <script>
        document.getElementById("compte").classList.add("is-active")
      </script>

      <section class="section is-title-bar">
        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <ul >
                <li style="font-size: 17px !important;">PAY2UP</li>
                <li style="font-size: 17px !important;">Profile</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              
            </div>
          </div>
        </div>
      </section>
      
      
      <section class="section is-main-section">
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <div class="card tile is-child">
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon"><i class="mdi mdi-account-circle default"></i></span>
                  Modifier mon profil
                </p>
              </header>
              <div class="card-content">
                <form method="post" action="/profil/update">
                  {% csrf_token %}
                  {% comment %} <div class="field is-horizontal">
                    <div class="field-label is-normal"><label class="label">Logo</label></div>
                    <div class="field-body">
                      <div class="field">
                        <div class="field file">
                          <label class="upload control">
                            <a class="button is-warning">
                              <span class="icon"><i class="mdi mdi-upload default"></i></span>
                              <span>Choisissez le logo</span>
                            </a>
                            <input type="file" name="logo">
                          </label>
                        </div>
                      </div>
                    </div>
                  </div> {% endcomment %}

                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Username</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="tel" autocomplete="on"  value="{{cu.username}}" class="input" disabled required>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Prénom</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="text" autocomplete="on" name="fn" value="{{cu.first_name}}" class="input" required>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Nom</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="text" autocomplete="on" name="ln" value="{{cu.last_name}}" class="input" required>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Entreprise</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="text" autocomplete="on" name="entreprise" value="{{cu.business.name}}" class="input" required>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  

                  <hr>
                  <div class="field is-horizontal">
                    <div class="field-label is-normal"></div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <button type="submit" class="button is-info">
                            Enregistrer
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="tile is-parent">
            <div class="card tile is-child">
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon"><i class="mdi mdi-account default"></i></span>
                  Profile
                </p>
              </header>
              <div class="card-content">
                <div class="is-user-avatar image has-max-width is-aligned-center">
                  <img style="width: 50px !important;" src="https://avatars.dicebear.com/v2/initials/{{cu.first_name}}-{{cu.last_name}}.svg" alt="John Doe">
                </div>
                <hr>
                <div class="field">
                  <label class="label">Nom</label>
                  <div class="control is-clearfix">
                    <input type="text"  readonly value="{{cu.first_name}} {{cu.last_name}}" class="input is-static">
                  </div>
                </div>
                <hr>
                <div class="field">
                  <label class="label">Username</label>
                  <div class="control is-clearfix">
                    <input type="text"  readonly value="{{cu.username}}" class="input is-static">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon"><i class="mdi mdi-lock default"></i></span>
              Changer le mot de passe
            </p>
          </header>
          <div class="card-content">
            <form method="post" action="/profil/pass/update">
              {% csrf_token %}
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Mot de passe actuel</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" minlength="8" name="op" autocomplete="current-password" class="input" required>
                    </div>
                    <p class="help">Votre mot de passe actuel est requis</p></div>
                </div>
              </div>
              <hr>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Nouveau mot de passe</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" minlength="8" autocomplete="new-password" name="np" class="input" required>
                    </div>
                    <p class="help">Votre nouveau mot de passe est requis</p>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Confirmer le mot de passe</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" minlength="8" autocomplete="new-password" name="npc" class="input" required>
                    </div>
                    <p class="help">Saisissez à nouveau le mot de passe</p>
                  </div>
                </div>
              </div>
              <hr>
              <div class="field is-horizontal">
                <div class="field-label is-normal"></div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <button type="submit" class="button is-info">
                        Enregistrer
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>

      <br><br><br>
    
      {% endblock content %}