import {MelDialog, DialogPage, RcmailDialogButton, RcmailDialogChoiceButton} from './js/modalv2.js';
      import { MelHtml } from './js/MelHtml.js';



      const button_add = new RcmailDialogChoiceButton('Ajouter', 'add', {
        click: (e) => {
          dialog.switch_page('page2');
          $('#txttoadd').val('');
        }
      });

      const button_clear = new RcmailDialogChoiceButton('Vider', 'clear', {click: (e) => {
        dialog.hide();
        $('#item-to-add').text('');
      }});

      const button_save = new RcmailDialogButton('Sauvegarder', {
        click: (e) => {
          $('#item-to-add').append($('<div>').text($('#txttoadd').val()));
          dialog.hide();
        }
      });
      const button_cancel = new RcmailDialogButton('Annuler', {
        click: (e) => {
          dialog.switch_page('index');
        }
      });

      const page1 = DialogPage.DrawChoice('Que faire ?', button_add, button_clear, 'index')
      let page2 = new DialogPage('page2', {title:'Ajouter un élément', buttons: [button_save, button_cancel]});
      page2.start_update_content({force_restart:true})            
        .div({class:'mel'})
          .input_text({placeholder:'Texte à ajouter', id:'txttoadd', class:'form-control'})
        .end();

      let dialog = new MelDialog(page1, {
        close() {
            doc_actions();
            dialog.switch_page('index');
        }
      });

      dialog.add_page(page2, {});

      $('#button-item').click(dialog.show.bind(dialog));
    

      <button id="button-item" class="btn btn-primary">
        Ouvrir la modale
        <span class="material-symbols-outlined" id="item-to-modify">ads_click</span>
      </button>
      <div id="item-to-add"></div>