templates/vitrine/account.html.twig line 1

  1. {% extends 'vitrine/base.html.twig' %}
  3. {# {% block title %}{{ title }} {% endblock %} #}
  5. {% block stylesheets %}
  7. {% endblock %}
  10. {% block body %}
  12.     <section class="section-padding-top">
  13.         <div class="profile-box">
  14.             <div class="container-fluid">
  15.                 <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
  16.                     <div class="d-flex align-items-center gap-3">
  17.                         <div class="account-logo d-flex align-items-center position-relative">
  18.                             <img src="{{ asset(app.user ? app.user.profilePhoto : 'blank.png', 'avatar') }}" class="img-fluid object-cover rounded-3 img-profil" alt="profile">
  19.                             {# <i class="fa-regular fa-pen-to-square"></i> #}
  20.                         </div>
  21.                         <div>
  22.                             <h6 class="font-size-18 text-capitalize text-white fw-500" id="id_fullname">{{ app.user ? app.user.firstName ~ ' ' ~ app.user.lastName : "" }} </h6>
  23.                             <span class="font-size-14 text-white fw-500" id="id_email">{{ app.user ? app.user.email : "" }}</span>
  24.                         </div>
  25.                     </div>
  26.                     <div class="iq-button">
  27.                         {# <a href="{{path('web_pricing')}}" class="btn text-uppercase position-relative">
  28.                             <span class="button-text">Subscription</span>
  29.                             <i class="fa-solid fa-play"></i>
  30.                         </a> #}
  31.                         {# <a class="nav-link" data-bs-toggle="tab" href="#profile-profile" role="tab" aria-selected="false">{{"Modifier"| trans}}</a> #}
  32.                         <ul class="d-flex nav nav-pills mb-0 text-center profile-tab" data-toggle="slider-tab" id="profile-pills-tab" role="tablist">
  33.                             <li class="nav-item">
  34.                                 <a class="nav-link active show" data-bs-toggle="tab" href="#profile-feed" id="close-form" role="tab" aria-selected="false">{{"Profil"| trans}}</a>
  35.                             </li>
  36.                         
  37.                             <li class="nav-item">
  38.                                 <a class="nav-link" data-bs-toggle="tab" href="#profile-profile" id="edit" role="tab" aria-selected="false">{{"Modifier"| trans}}</a>
  39.                             </li>
  40.                         </ul>
  41.                     </div>
  42.                 </div>
  44.                 <div class="col-12">
  45.                     <div class="profile-content tab-content iq-tab-fade-up">
  46.             
  47.                         <div id="profile-profile" class="tab-pane fade">
  48.                             <div class="card">
  49.                                 
  50.                                 <div class="card-body">
  51.                                     <form action="" id="kt_add_user_offcanvas_form" class="row g-3 section-form" novalidate>
  52.                                         
  53.                                         <div class="row">
  54.                                             <div class="col-6 mt-2">
  55.                                                 <div class="fv-row form-group ">
  56.                                                     <label class="form-label flex-grow-1" for="lastName">
  57.                                                     <strong>{{"Nom"| trans}}</strong> :
  58.                                                     </label>
  59.                                                     <input id="lastName" type="text" value="{{app.user ? app.user.lastName : ''}}" name="lastName" class="form-control"  required/>
  60.                                                     
  61.                                                 </div>
  62.                                             </div>
  63.                                             <div class="col-6 mt-2">
  64.                                                 <div class="fv-row form-group  ">
  65.                                                     <label class="form-label flex-grow-1" for="firstName">
  66.                                                     <strong>{{"Prénom"| trans}}</strong> :
  67.                                                     </label>
  68.                                                     <input id="firstName" type="text" value="{{app.user ? app.user.firstName : ' '}}" name="firstName" class="form-control"  required/>
  69.                                                     
  70.                                                 </div>
  71.                                             </div>
  72.                                             <div class="col-6">
  73.                                                 <div class="fv-row form-group ">
  74.                                                     <label class="form-label flex-grow-1" for="email">
  75.                                                     <strong>{{"Email" | trans}}</strong> :
  76.                                                     </label>
  77.                                                 
  78.                                                     <input id="email" type="email" value="{{app.user ? app.user.email : ''}}" name="email" class="form-control"  required/>
  79.                                                 </div>
  80.                                             </div>
  81.                                             <div class="col-6">
  82.                                                 <div class="fv-row form-group ">
  83.                                                     <label class="form-label flex-grow-1" for="phone">
  84.                                                     <strong>{{"Téléphone" | trans}}</strong> :
  85.                                                     </label>
  86.                                                     <input id="phone" type="tel" name="phone" class="form-control tel" required/>
  87.                                                 </div>
  88.                                             </div>
  89.                                             
  90.                                             <div class="col-12">
  91.                                                     <label class="form-label flex-grow-1" for="cover">
  92.                                                     <strong>{{"Image de profil"| trans}}</strong> :
  93.                                                     </label>
  94.                                                     <input id="cover" type="file" name="cover" class="form-control " placeholder="{{"cover" | trans}}" />
  95.                                                     
  96.                                             </div>
  97.                                         </div>
  98.                                         
  99.                                         <div class="offcanvas-footer border-top">
  100.                                             <div class="d-grid d-flex gap-3 p-3">
  101.                                                 <button type="submit" data-kt-user-offcanvas-action="submit" class="btn btn-primary d-block">
  102.                                                     <span class="indicator-label"><i class="fa-solid fa-floppy-disk me-2"></i>{{"Enregistrer"| trans}}</span>
  103.                                                     <span class="indicator-progress">{{"En cours"| trans}}
  104.                                                     <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
  105.                                                 </button>
  106.                                                 <button type="button" class="btn btn-outline-primary d-block" data-kt-cancel="offcanvas"  aria-label="Close">
  107.                                                     <i class="fa-solid fa-angles-left me-2"></i>{{"Fermer"| trans}}
  108.                                                 </button>
  109.                                             </div>
  110.                                         </div>
  111.                                     </form>
  112.                                 </div>
  113.                             </div>
  114.                         
  115.                         </div>
  116.                     </div>
  117.                 </div>
  118.             </div> 
  119.         </div>
  120.         <div class="tabs">
  121.             <div class="container-fluid">
  122.                 <div class="content-details iq-custom-tab-style-two">
  123.                     <ul class="d-flex justify-content-center nav nav-pills tab-header" role="tablist">
  124.                         <li class="nav-item">
  125.                             <a class="nav-link active show" data-bs-toggle="pill" href="#playlist" role="tab" aria-selected="true">{{"Mes films"| trans}}</a>
  126.                         </li>
  127.                         <li class="nav-item">
  128.                             <a class="nav-link" data-bs-toggle="pill" href="#watchlist" role="tab" aria-selected="false">{{"Mes épisodes"| trans}}</a>
  129.                         </li>
  130.                        
  131.                     </ul>
  132.                     <div class="tab-content px-0">
  133.                         <div id="playlist" class="tab-pane animated fadeInUp active show" role="tabpanel">
  134.                             <div class="overflow-hidden">
  135.                                 <div class="d-flex align-items-center justify-content-between my-4">
  136.                                     <h5 class="main-title text-capitalize mb-0">{{"Mes films"}}</h5>
  137.                                 </div>
  138.                                 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4" id="content-movie">
  139.                                     
  140.                                 </div>
  141.                                 <div class="text-center mt-2 mb-5 hidden" id="movie-clear"> {{"Vous n'avez aucun média actuellement"| trans}}</div>
  142.                                
  143.                             </div>
  144.                         </div>
  145.                         <div id="watchlist" class="tab-pane animated fadeInUp" role="tabpanel">
  146.                             <div class="overflow-hidden">
  147.                                 <div class="d-flex align-items-center justify-content-between my-4">
  148.                                     <h5 class="main-title text-capitalize mb-0">{{"Mes épisodes"}}</h5>
  149.                                 </div>
  150.                                 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4" id="content-episode">
  151.                                 
  152.                                     
  153.                                 </div>
  154.                                 <div class="text-center mt-2 mb-5 hidden" id="episode-clear"> {{"Vous n'avez aucun média actuellement"| trans}}</div>
  155.                             </div>
  156.                         </div>
  157.                         
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.         </div>
  162.     </section>
  164.     <div class="modal fade" id="addNewPlaylist" tabindex="-1" aria-hidden="true">
  165.     <div class="modal-dialog modal-lg">
  166.         <div class="modal-content border-0">
  167.         <div class="modal-header border-0">
  168.             <div>
  169.                 <h1 class="modal-title text-capitalize fs-5 fw-500">Create new Playlist</h1>
  170.                 <p class="mb-0">Please fill in all information below to create new playlist.</p>
  171.             </div>
  172.             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  173.         </div>
  174.         <div class="modal-body">
  175.             <form>
  176.                 <div class="form-group">
  177.                     <label class="text-white fw-500 mb-2">Name *</label>
  178.                     <input type="text" class="form-control">
  179.                 </div>
  180.                 <div class="form-group">
  181.                     <label class="text-white fw-500 mb-2">Description</label>
  182.                     <textarea class="form-control" cols="5"></textarea>
  183.                 </div>
  184.                 <div class="form-group">
  185.                     <label class="text-white fw-500 mb-2">Privacy</label>
  186.                     <select class="form-control">
  187.                         <option>Public</option>
  188.                         <option>Private</option>
  189.                     </select>
  190.                 </div>
  191.                 <div class="form-group">
  192.                     <label class="text-white fw-500">Playlist Thumbnail</label>
  193.                     <small class="d-block my-2">Support *.webp, *webp, *.gif, *.webp. Maximun upload file size: 5mb.</small>
  194.                     <input type="file" class="form-control">
  195.                 </div>
  196.                 <div class="form-group d-flex align-items-center gap-3">
  197.                     <button class="btn btn-sm btn-light text-uppercase fw-medium">cancel</button>
  198.                     <button class="btn btn-sm btn-primary text-uppercase fw-medium">save</button>
  199.                 </div>
  200.             </form>
  201.         </div>
  202.         </div>
  203.     </div>
  204.     </div>
  207. {% endblock %}
  209. {% block javascripts %} 
  210.    
  211.     <script>
  212.         const  url_edit_profil          =   "{{ path('app_edit_profil') }}",
  213.         _get_purchase_media_link        =   "{{path('app_get_purchaselist_movie')}}",
  214.         _get_purchase_episode_link      =   "{{path('app_get_purchaselist_episode')}}",
  215.         user_avatar_link                =   "{{ asset('app/images/avatars/_1_') }}",
  216.         _phone_user                     =   "{{app.user ? app.user.phone : ''}}",
  217.         edit                            =   "{{ app.request.query.get('edit') }}";
  219.     </script>
  221.     <script src="{{ asset('app/js/user/profil.js') }}"></script>
  222.     <script src="{{ asset('vitrine/js/account/my-account.js') }}"></script>
  223. {% endblock %}