hackpoint/plugin/hackpoint/page.list.sketch.php

<?php
global $myUser;


require_once(__DIR__.SLASH.'Sketch.class.php');
?>

<div class="row">
    
    <div class="col-md-8">
         <!-- 
            data-join : spécifie la liaison par défaut des filtres (and | or) si rien n'est spéficié ou que l'attrbute n'existe pas, un select apparait pour
                        que l'utilisateur puisse choisir
            data-slug : si spécifié, la recherche devient enregistrable pour une réutilisation ultérieure
            data-only-advanced :si l'attribut est présent,  cache la recherche simple et ouvre par defaut la recherche avancée
            data-autosearch (default: true) : si définit a false, ne lancera pas la fonction data-function automatiquement en fin de chargement du composant
        -->
        <select id="filters"  data-slug="sketch-search" data-type="filter" data-label="Recherche" data-join="and" data-function="hackpoint_sketch_search" >
      
        </select>

    </div>
    
	<div class="col-md-4">
		<?php if($myUser->can('hackpoint', 'edit')) : ?>
		<a href="action.php?action=hackpoint_sketch_add" class="btn btn-success right"><i class="fas fa-plus"></i> Ajouter</a>
		<?php endif; ?>
	</div>
</div>

<div class="row mt-2">
	<!-- search results -->
	<div class="col-xl-12">
		<ul id="sketchs"  data-entity-search="hackpoint_sketch_search">
 
            <li data-id="{{id}}" class="hidden">

                    <div class="card" style="width: 20rem;">
                      <img src="{{picture}}" data-type="dropimage" data-callback="hackpoint_sketch_save_cover" class="card-img-top" alt="{{label}}">

                      <span class="sketch-number">#{{id}}</span>
                      <div class="card-body">
                        <h5 class="card-title">{{label}}</h5>
                        
                        <span class="d-block text-muted"><i class="far fa-meh-blank"></i> {{creator}}  <i class="far fa-clock"></i> {{created}}</span>
                        (Visibilité : {{#state}}<i class="far fa-eye"></i> Publique{{/state}}{{^state}}<i class="far fa-eye-slash"></i> Privé{{/state}})
                        <p class="card-text mt-2">{{comment}}</p>
                        <a href="index.php?module=hackpoint&page=sheet.sketch&id={{id}}" class="btn btn-dark w-100">Go !</a>
                      </div>

                      <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated {{progress-color}}" role="progressbar" style="width: {{progress}}%;" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100">{{progress}}%</div>
                        </div>
                    </div>

	             
	              
                    
                </li>
        </ul>
        <div class="clear"></div>
         <!-- Pagination -->
       
        <ul class="pagination">
            <li class="page-item hidden" data-value="{{value}}" title="Voir la page {{label}}" onclick="$(this).parent().find('li').removeClass('active');$(this).addClass('active');hackpoint_sketch_search();">
                <a class="page-link" href="#">{{label}}</a>
            </li>
        </ul>

	</div>
</div>