Amélioration Classes ItemSheet séparées

Meilleur support des feuilles ItemSheet séparés
Séparation de la feuille Conteneurs

Mise en commun de la logique drag&drop

module/environnement.js

@@ -126,12 +126,8 @@ export class Environnement {
 
 export class EnvironmentSheetHelper {
 
-  static defaultOptions(defaultOptions, type) {
+  static defaultOptions(defaultOptions) {
     return mergeObject(defaultOptions, {
-      classes: ["rdd", "sheet", "item"],
-      template: `systems/foundryvtt-reve-de-dragon/templates/item-${type}-sheet.html`,
-      width: 500,
-      height: 600,
       tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "informations" }]
     });
   }
@@ -152,18 +148,9 @@ export class EnvironmentSheetHelper {
 
   /* -------------------------------------------- */
   static async getData(sheet, formData) {
-    const autresMilieux = await game.system.rdd.environnement.autresMilieux(sheet.item);
+    return mergeObject(formData, {
-    mergeObject(formData, {
+      milieux: await game.system.rdd.environnement.autresMilieux(sheet.item)
-      title: formData.name,
-      isGM: game.user.isGM,
-      owner: sheet.actor?.isOwner,
-      isOwned: sheet.actor ? true : false,
-      actorId: sheet.actor?.id,
-      editable: sheet.isEditable,
-      cssClass: sheet.isEditable ? "editable" : "locked",
-      milieux: autresMilieux
     });
-    return formData;
   }
 
   static activateListeners(sheet, html) {
@@ -238,13 +225,4 @@ export class EnvironmentSheetHelper {
     return $(event.currentTarget)?.parents("div.environnement-milieu").data("milieu");
   }
 
-  static template(itemType) {
-    /* -------------------------------------------- */
-    return `systems/foundryvtt-reve-de-dragon/templates/item-${itemType}-sheet.html`;
-  }
-
-  static title(item) {
-    return Misc.typeName('Item', item.type) + ': ' + item.name;
-  }
-
 }

module/item-conteneur-sheet.js

@@ -0,0 +1,58 @@
+import { RdDItemSheet } from "./item-sheet.js";
+import { RdDSheetUtility } from "./rdd-sheet-utility.js";
+import { RdDUtility } from "./rdd-utility.js";
+
+export class RdDConteneurItemSheet extends RdDItemSheet {
+
+  static get ITEM_TYPE() { return "conteneur" };
+
+  async getData() {
+    const formData = await super.getData();
+    if (this.actor) {
+      this.prepareConteneurData(formData);
+    }
+  }
+
+  activateListeners(html) {
+    super.activateListeners(html);
+    if (!this.options.editable) return;
+
+    html.find('.conteneur-name a').click(async event => {
+      RdDUtility.toggleAfficheContenu(RdDSheetUtility.getItemId(event));
+      this.render(true);
+    });
+  }
+
+  /* -------------------------------------------- */
+  prepareConteneurData(formData) {
+    RdDUtility.filterEquipementParType(formData, this.actor.itemTypes);
+
+    this.objetVersConteneur = RdDUtility.buildArbreDeConteneurs(formData.conteneurs, formData.objets);
+    formData.subItems = formData.conteneurs.find(it => it._id == this.item.id)?.subItems;
+  }
+
+  async _onDragStart(event) {
+    console.log("_onDragStart", event);
+    if (event.target.classList.contains("entity-link")) return;
+
+    const itemId = event.srcElement?.attributes["data-item-id"].value;
+    const item = this.actor.items.get(itemId);
+    // Create drag data
+    const dragData = {
+      actorId: this.actor.id,
+      type: "Item",
+      data: item.system
+    };
+
+    event.dataTransfer.setData("text/plain", JSON.stringify(dragData));
+  }
+
+  async _onDropItem(event, dragData) {
+    if (this.actor) {
+      const dropParams = RdDSheetUtility.prepareItemDropParameters(this.item.id, this.actor, dragData, this.objetVersConteneur);
+      await this.actor.processDropItem(dropParams);
+      await this.render(true);
+    }
+  }
+
+}

module/item-herbe-sheet.js

@@ -1,26 +1,12 @@
-import { SYSTEM_RDD } from "./constants.js";
 import { EnvironmentSheetHelper } from "./environnement.js";
 import { RdDItemSheet } from "./item-sheet.js";
-import { Misc } from "./misc.js";
-
-const ITEM_TYPE = 'herbe';
 
 export class RdDHerbeItemSheet extends RdDItemSheet {
 
-  static register() {
+  static get ITEM_TYPE() { return "herbe" };
-    Items.registerSheet(SYSTEM_RDD, RdDHerbeItemSheet, {
-      label: Misc.typeName('Item', ITEM_TYPE),
-      types: [ITEM_TYPE],
-      makeDefault: true
-    });
-  }
 
   static get defaultOptions() {
-    return EnvironmentSheetHelper.defaultOptions(super.defaultOptions, ITEM_TYPE);
+    return EnvironmentSheetHelper.defaultOptions(super.defaultOptions);
-  }
-
-  _getHeaderButtons() {
-    return EnvironmentSheetHelper.getHeaderButtons(this, super._getHeaderButtons());
   }
 
   setPosition(options = {}) {
@@ -36,12 +22,4 @@ export class RdDHerbeItemSheet extends RdDItemSheet {
     super.activateListeners(html);
     EnvironmentSheetHelper.activateListeners(this, html);
   }
-
-  get template() {
-    return EnvironmentSheetHelper.template(this.item.type);
-  }
-
-  get title() {
-    return EnvironmentSheetHelper.title(this.item);
-  }
 }

module/item-ingredient-sheet.js

@@ -1,25 +1,12 @@
-import { SYSTEM_RDD } from "./constants.js";
 import { EnvironmentSheetHelper } from "./environnement.js";
 import { RdDItemSheet } from "./item-sheet.js";
-import { Misc } from "./misc.js";
 
-const ITEM_TYPE = 'ingredient';
 export class RdDIngredientItemSheet extends RdDItemSheet {
 
-  static register() {
+  static get ITEM_TYPE() { return "ingredient" };
-    Items.registerSheet(SYSTEM_RDD, RdDIngredientItemSheet, {
-      label: Misc.typeName('Item', ITEM_TYPE),
-      types: [ITEM_TYPE],
-      makeDefault: true
-    });
-  }
 
   static get defaultOptions() {
-    return EnvironmentSheetHelper.defaultOptions(super.defaultOptions, ITEM_TYPE);
+    return EnvironmentSheetHelper.defaultOptions(super.defaultOptions);
-  }
-
-  _getHeaderButtons() {
-    return EnvironmentSheetHelper.getHeaderButtons(this, super._getHeaderButtons());
   }
 
   setPosition(options = {}) {
@@ -35,12 +22,4 @@ export class RdDIngredientItemSheet extends RdDItemSheet {
     super.activateListeners(html);
     EnvironmentSheetHelper.activateListeners(this, html);
   }
-
-  get template() {
-    return EnvironmentSheetHelper.template(this.item.type);
-  }
-
-  get title() {
-    return EnvironmentSheetHelper.title(this.item);
-  }
 }

module/item-rencontre-sheet.js

@@ -1,29 +1,16 @@
 import { RdDRencontre } from "./item-rencontre.js";
+import { RdDItemSheet } from "./item-sheet.js";
 
-/**
+export class RdDRencontreItemSheet extends RdDItemSheet {
- * Item sheet pour configurer les rencontres
+  
- * @extends {ItemSheet}
+  static get ITEM_TYPE() { return "rencontre" };
- */
-export class RdDRencontreItemSheet extends ItemSheet {
 
-  /** @override */
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
-      classes: ["rdd", "sheet", "item"],
-      template: "systems/foundryvtt-reve-de-dragon/templates/item-rencontre-sheet.html",
-      width: 500,
-      height: 500,
       tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "carac" }]
     });
   }
 
-  /* -------------------------------------------- */
-  _getHeaderButtons() {
-    let buttons = super._getHeaderButtons();
-    buttons.unshift({ class: "post", icon: "fas fa-comment", onclick: ev => this.item.postItem() });
-    return buttons;
-  }
-
   /* -------------------------------------------- */
   /** @override */
   setPosition(options = {}) {
@@ -34,7 +21,6 @@ export class RdDRencontreItemSheet extends ItemSheet {
     return position;
   }
 
-
   /* -------------------------------------------- */
   async getData() {
     const formData = duplicate(this.item);
@@ -96,13 +82,4 @@ export class RdDRencontreItemSheet extends ItemSheet {
     updates[key] = liste;
     this.item.update(updates);
   }
-
-  get template() {
-  /* -------------------------------------------- */
-    return `systems/foundryvtt-reve-de-dragon/templates/item-rencontre-sheet.html`;
-  }
-
-  get title() {
-    return `Rencontre: ${this.object.name}`;
-  }
 }

module/item-sheet.js

@@ -9,23 +9,49 @@ import { ReglesOptionelles } from "./settings/regles-optionelles.js";
 import { SYSTEM_RDD } from "./constants.js";
 import { RdDSheetUtility } from "./rdd-sheet-utility.js";
 import { SystemCompendiums } from "./settings/system-compendiums.js";
+import { Misc } from "./misc.js";
 
 /**
- * Extend the basic ItemSheet with some very simple modifications
+ * Extend the basic ItemSheet for RdD specific items
- * @extends {ItemSheet}
  */
 export class RdDItemSheet extends ItemSheet {
 
+  static get ITEM_TYPE() {
+    return undefined
+  }
+
+  static defaultTemplate(type) {
+    return type ?
+      `systems/foundryvtt-reve-de-dragon/templates/item-${type}-sheet.html` :
+      "systems/foundryvtt-reve-de-dragon/templates/item-sheet.html";
+  }
+
+  static register(sheetClass) {
+    Items.registerSheet(SYSTEM_RDD, sheetClass, {
+      label: Misc.typeName('Item', sheetClass.ITEM_TYPE),
+      types: [sheetClass.ITEM_TYPE],
+      makeDefault: true
+    })
+  }
+
   /** @override */
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       classes: [SYSTEM_RDD, "sheet", "item"],
-      template: "systems/foundryvtt-reve-de-dragon/templates/item-sheet.html",
+      template: RdDItemSheet.defaultTemplate(RdDItemSheet.ITEM_TYPE),
       width: 550,
       height: 550
     });
   }
 
+  /* -------------------------------------------- */
+  get template() {
+    return RdDItemSheet.defaultTemplate(this.item.type);
+  }
+
+  get title() {
+    return `${Misc.typeName('Item', this.item.type)}: ${this.item.name}`;
+  }
 
   /* -------------------------------------------- */
   _getHeaderButtons() {
@@ -67,6 +93,7 @@ export class RdDItemSheet extends ItemSheet {
       system: this.item.system,
       isGM: game.user.isGM,
       actorId: this.actor?.id,
+      isOwned: this.actor ? true : false,
       owner: this.item.isOwner,
       editable: this.isEditable,
       cssClass: this.isEditable ? "editable" : "locked",
@@ -74,12 +101,6 @@ export class RdDItemSheet extends ItemSheet {
       description: await TextEditor.enrichHTML(this.item.system.description, { async: true }),
       descriptionmj: await TextEditor.enrichHTML(this.item.system.descriptionmj, { async: true })
     }
-    if (this.actor) {
-      formData.isOwned = true;
-      if (this.item.type == 'conteneur') {
-        this.prepareConteneurData(formData);
-      }
-    }
 
     const competences = await SystemCompendiums.getCompetences(this.actor?.type);
     formData.categorieCompetences = RdDItemCompetence.getCategorieCompetences()
@@ -131,25 +152,10 @@ export class RdDItemSheet extends ItemSheet {
     return formData;
   }
 
-  /* -------------------------------------------- */
-  prepareConteneurData(formData) {
-    RdDUtility.filterEquipementParType(formData, this.actor.itemTypes);
-
-    this.objetVersConteneur = RdDUtility.buildArbreDeConteneurs(formData.conteneurs, formData.objets);
-    formData.subItems = formData.conteneurs.find(it => it._id == this.item.id)?.subItems;
-
-  }
-
   /* -------------------------------------------- */
   /** @override */
   activateListeners(html) {
     super.activateListeners(html);
-
-    if (this.item.type == 'conteneur') {
-      this.form.ondragstart = (event) => this._onDragStart(event);
-      this.form.ondrop = (event) => this._onDrop(event);
-    }
-
     let itemSheetDialog = this;
 
     HtmlUtility._showControlWhen($(".item-cout"), ReglesOptionelles.isUsing('afficher-prix-joueurs') || game.user.isGM || !this.item.isOwned);
@@ -157,6 +163,9 @@ export class RdDItemSheet extends ItemSheet {
 
     // Everything below here is only needed if the sheet is editable
     if (!this.options.editable) return;
+    this.form.ondragstart = (event) => this._onDragStart(event);
+    this.form.ondrop = (event) => this._onDrop(event);
+
 
     // Select competence categorie
     html.find(".categorie").change(event => this._onSelectCategorie(event));
@@ -227,10 +236,6 @@ export class RdDItemSheet extends ItemSheet {
       const item = RdDSheetUtility.getItem(event, this.actor);
       this.actor.actionItem(item, async () => itemSheetDialog.render(true));
     });
-    html.find('.conteneur-name a').click(async event => {
-      RdDUtility.toggleAfficheContenu(RdDSheetUtility.getItemId(event));
-      this.render(true);
-    });
   }
 
   /* -------------------------------------------- */
@@ -245,13 +250,6 @@ export class RdDItemSheet extends ItemSheet {
   }
 
   /* -------------------------------------------- */
-  get template() {
-    let type = this.item.type
-    return `systems/foundryvtt-reve-de-dragon/templates/item-${type}-sheet.html`;
-  }
-
-  /* -------------------------------------------- */
-
   /** @override */
   _updateObject(event, formData) {
     if (this.item.type == 'sort') {
@@ -262,50 +260,41 @@ export class RdDItemSheet extends ItemSheet {
     return this.item.update(formData);
   }
 
+  /* -------------------------------------------- */
   async _onDragStart(event) {
-    console.log("_onDragStart", event);
-    if (event.target.classList.contains("entity-link")) return;
-
-    const itemId = event.srcElement?.attributes["data-item-id"].value;
-    const item = this.actor.items.get(itemId);
-    // Create drag data
-    const dragData = {
-      actorId: this.actor.id,
-      type: "Item",
-      data: item.system
-    };
-
-    event.dataTransfer.setData("text/plain", JSON.stringify(dragData));
   }
 
   async _onDrop(event) {
     // Try to extract the dragData
-    let dragData;
+    let dragData = RdDItemSheet.$extractDragData(event);
-    try {
+    if (!dragData) return false;
-      dragData = JSON.parse(event.dataTransfer.getData('text/plain'));
-    } catch (err) {
-      return false;
-    }
-
     const allowed = Hooks.call("dropActorSheetData", this.actor, this, dragData);
-    if (allowed === false) return;
+    if (allowed === false) return false;
 
     // Handle different dragData types
     switch (dragData.type) {
       case "Item":
         return this._onDropItem(event, dragData);
+      case "Actor":
+        return this._onDropActor(event, dragData);
     }
     return super._onDrop(event);
   }
 
-  /* -------------------------------------------- */
+  static $extractDragData(event) {
-  async _onDropItem(event, dragData) {
+    try {
-    if (this.actor) {
+      const eventData = event?.dataTransfer?.getData('text/plain');
-      const dropParams = RdDSheetUtility.prepareItemDropParameters(this.item.id, this.actor, dragData, this.objetVersConteneur);
+      if (eventData) {
-      await this.actor.processDropItem(dropParams);
+        return JSON.parse(eventData);
-      await this.render(true);
       }
+    } catch (err) { }
+    return undefined;
   }
 
+  async _onDropItem(event, dragData) {
+  }
+
+  async _onDropActor(event, dragData) {
+  }
 
 }

module/item-signedraconique-sheet.js

@@ -1,29 +1,14 @@
-import { SYSTEM_RDD } from "./constants.js";
+import { RdDItemSheet } from "./item-sheet.js";
 import { RdDItemSigneDraconique } from "./item-signedraconique.js";
 import { TMRUtility } from "./tmr-utility.js";
 
 /**
  * Item sheet pour signes draconiques
- * @extends {ItemSheet}
+ * @extends {RdDItemSheet}
  */
-export class RdDSigneDraconiqueItemSheet extends ItemSheet {
+export class RdDSigneDraconiqueItemSheet extends RdDItemSheet {
 
-  /** @override */
+  static get ITEM_TYPE() { return "signedraconique" }
-  static get defaultOptions() {
-    return mergeObject(super.defaultOptions, {
-      classes: [SYSTEM_RDD, "sheet", "item"],
-      template: "systems/foundryvtt-reve-de-dragon/templates/item-signedraconique-sheet.html",
-      width: 550,
-      height: 550
-    });
-  }
-
-  /* -------------------------------------------- */
-  _getHeaderButtons() {
-    let buttons = super._getHeaderButtons();
-    buttons.unshift({ class: "post", icon: "fas fa-comment", onclick: ev => this.item.postItem() });
-    return buttons;
-  }
 
   /* -------------------------------------------- */
   /** @override */
@@ -61,12 +46,13 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
     if (!this.options.editable) return;
 
     html.find(".signe-aleatoire").click(event => this.setSigneAleatoire());
-    html.find("input.select-tmr").change((event) => this.onSelectTmr(event));
+    html.find("input.select-tmr").change(event => this.onSelectTmr(event));
-    html.find(".signe-xp-sort").change((event) => this.onValeurXpSort(event.currentTarget.attributes['data-typereussite']?.value, Number(event.currentTarget.value)));
+    html.find(".signe-xp-sort").change(event => this.onValeurXpSort(event.currentTarget.attributes['data-typereussite']?.value, Number(event.currentTarget.value)));
   }
 
   async setSigneAleatoire() {
     const newSigne = await RdDItemSigneDraconique.randomSigneDraconique();
+    newSigne.name = this.item.name;
     this.item.update(newSigne);
   }
 
@@ -88,12 +74,4 @@ export class RdDSigneDraconiqueItemSheet extends ItemSheet {
     await this.item.update({ 'system.valeur': newValeur });
   }
 
-  /* -------------------------------------------- */
-  get template() {
-    return `systems/foundryvtt-reve-de-dragon/templates/item-signedraconique-sheet.html`;
-  }
-
-  get title() {
-    return `Signe draconique: ${this.object.name}`;
-  }
 }

module/rdd-main.js

@@ -42,6 +42,7 @@ import { TMRRencontres } from "./tmr-rencontres.js";
 import { RdDHerbeItemSheet } from "./item-herbe-sheet.js";
 import { Environnement } from "./environnement.js";
 import { RdDIngredientItemSheet } from "./item-ingredient-sheet.js";
+import { RdDConteneurItemSheet } from "./item-conteneur-sheet.js";
 
 /* -------------------------------------------- */
 /*  Foundry VTT Initialization                  */
@@ -163,8 +164,8 @@ Hooks.once("init", async function () {
       RdDCombat.onSocketMessage(sockmsg);
       ChatUtility.onSocketMessage(sockmsg);
       RdDActor.onSocketMessage(sockmsg);
-    } catch(e) {
+    } catch (e) {
-      console.error('game.socket.on(SYSTEM_SOCKET_ID) Exception: ', sockmsg,' => ', e)
+      console.error('game.socket.on(SYSTEM_SOCKET_ID) Exception: ', sockmsg, ' => ', e)
     }
   });
 
@@ -187,23 +188,18 @@ Hooks.once("init", async function () {
   Actors.registerSheet(SYSTEM_RDD, RdDActorVehiculeSheet, { types: ["vehicule"], makeDefault: true });
   Actors.registerSheet(SYSTEM_RDD, RdDActorEntiteSheet, { types: ["entite"], makeDefault: true });
   Items.unregisterSheet("core", ItemSheet);
-  Items.registerSheet(SYSTEM_RDD, RdDSigneDraconiqueItemSheet, {
+
-    label: "Signe draconique",
+  RdDItemSheet.register(RdDSigneDraconiqueItemSheet);
-    types: ["signedraconique"],
+  RdDItemSheet.register(RdDRencontreItemSheet);
-    makeDefault: true
+  RdDItemSheet.register(RdDConteneurItemSheet);
-  });
+  RdDItemSheet.register(RdDHerbeItemSheet);
-  Items.registerSheet(SYSTEM_RDD, RdDRencontreItemSheet, {
+  RdDItemSheet.register(RdDIngredientItemSheet);
-    label: "Rencontre",
+
-    types: ["rencontre"],
-    makeDefault: true
-  });
-  RdDHerbeItemSheet.register();
-  RdDIngredientItemSheet.register();
   Items.registerSheet(SYSTEM_RDD, RdDItemSheet, {
     types: [
       "competence", "competencecreature",
       "recettealchimique", "musique", "chant", "danse", "jeu", "recettecuisine", "oeuvre",
-      "objet", "arme", "armure", "conteneur", "livre", "potion", "munition",
+      "objet", "arme", "armure", "livre", "potion", "munition",
       "monnaie", "nourritureboisson", "gemme",
       "meditation", "queue", "ombre", "souffle", "tete", "casetmr", "sort", "sortreserve",
       "nombreastral", "tache", "maladie", "poison", "possession",
@@ -247,8 +243,8 @@ function messageDeBienvenue() {
 
 /* -------------------------------------------- */
 // Register world usage statistics
-function registerUsageCount( registerKey ) {
+function registerUsageCount(registerKey) {
-  if ( game.user.isGM ) {
+  if (game.user.isGM) {
     game.settings.register("world", "world-key", {
       name: "Unique world key",
       scope: "world",
@@ -258,9 +254,9 @@ function registerUsageCount( registerKey ) {
     });
 
     let worldKey = game.settings.get("world", "world-key")
-    if ( worldKey == undefined || worldKey == "" ) {
+    if (worldKey == undefined || worldKey == "") {
       worldKey = randomID(32)
-      game.settings.set("world", "world-key", worldKey )
+      game.settings.set("world", "world-key", worldKey)
     }
     let regURL = `https://www.uberwald.me/fvtt_appcount/count.php?name="${registerKey}"&worldKey="${worldKey}"&version="${game.release.generation}.${game.release.build}"&system="${game.system.id}"&systemversion="${game.system.version}"`
     $.ajax(regURL)
@@ -300,7 +296,7 @@ Hooks.once("ready", async function () {
   }
   if (Misc.isUniqueConnectedGM()) {
     messageDeBienvenue();
-    registerUsageCount( SYSTEM_RDD );
+    registerUsageCount(SYSTEM_RDD);
   }
 });
 

module/rdd-utility.js

@@ -1,5 +1,4 @@
 /* Common useful functions shared between objects */
-
 import { ChatUtility } from "./chat-utility.js";
 import { RdDCombat } from "./rdd-combat.js";
 import { Misc } from "./misc.js";
@@ -14,7 +13,6 @@ import { RdDPossession } from "./rdd-possession.js";
 import { RdDNameGen } from "./rdd-namegen.js";
 import { RdDConfirm } from "./rdd-confirm.js";
 import { RdDCalendrier } from "./rdd-calendrier.js";
-import { RdDCarac } from "./rdd-carac.js";
 import { Environnement } from "./environnement.js";
 
 /* -------------------------------------------- */

styles/simple.css

@@ -497,8 +497,7 @@ input:is(.blessure-premiers_soins, .blessure-soins_complets) {
 }
 
 .foundryvtt-reve-de-dragon .sheet-body,
-.foundryvtt-reve-de-dragon .sheet-body .tab,
+.foundryvtt-reve-de-dragon .sheet-body .tab {
-.foundryvtt-reve-de-dragon .sheet-body .tab .editor {
   height: 100%;
 }
 
@@ -543,7 +542,7 @@ input:is(.blessure-premiers_soins, .blessure-soins_complets) {
 
 .editor {
   border: 2;
-  height: 300px;
+  height: 10rem;
   padding: 0 3px;
 }
 

templates/item-herbe-sheet.html

@@ -5,7 +5,7 @@
       <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
       {{#if isIngredientPotionBase}}
       <div class="form-group">
-        <span for="xp"><a class="creer-potion-base chat-card-button" data-actor-id="{{actorId}}">Fabriquer une potion depuis cette plante</a></span>
+        <span><a class="creer-potion-base chat-card-button" data-actor-id="{{actorId}}">Fabriquer une potion depuis cette plante</a></span>
       </div>
       {{/if}}
     </div>