<style>
  .builder-section{
    background: #d8c5f0;
    padding:0 5px;
    border-radius: 2px;
    font-weight: bold;
  }
  .builder-section-counter{
    background:#bb00cc;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.6rem;
    margin-left: 0.6rem;
  }
  .builder-section-content{
    padding:0.3rem 1rem;
  }
  .builder-section-content-item{
    background: #c9f0c5;
    padding: 0 5px 5px 5px;
    border-radius: 2px;
  }
  .builder-section-content-item-properties{
    background: white;
    padding: 5px;
    border-radius: 2px;
  }
</style>
<div id="page-builder" class="layout vertical main">
  <!-- Title, remove when variable substitution works on pages -->
  <div class="layout horizontal right"><span data-#="id"></span></div>
  <!-- Editor -->
  <div class="layout horizontal gap">
    <div id="builder" class="main c80-20 layout vertical">
      <div data-$="sections" class="layout vertical">
        <div class="builder-section layout horizontal middle"><span data-#="id"></span><span class="builder-section-counter" title="Número de usos en el layout" data-#="count"></span></div>
        <div class="builder-section-content layout vertical left gap">
          <div data-$="items" class="builder-section-content-item layout vertical">
            <div data-#="@"></div>
            <div class="builder-section-content-item-properties">
              Hola!
            </div>
          </div>          
        </div>
      </div>
    </div>
    <!-- Page meta -->
    <div class="main c80-20">
      <div class="layout vertical gap">
        <div class="main layout vertical">
          <div class="caption">Archivo base (layout):</div>
          <div class="info">Archivo base sobre la que se configura la página.</div>
          <input name="p-layout" data-value="layout">
        </div>
        <div class="main layout vertical">
          <div class="caption">Controladores de página:</div>
          <div class="info">Modulos a ejecutar al inicio de la página, los módilos se ejecutaran en el orden indicado.
          </div>
          <div class="layout vertical">
            <div data-$="controller" class="layout horizontal middle">
              <div class="main layout horizontal small">
                <div data-#="module"></div><div>.</div><div data-#="action"></div>
              </div>
              <i class="fa-solid fa-trash"></i>
            </div>
          </div>
        </div>
        <div class="main layout vertical">
          <div class="caption">Librerías de cotroles</div>
          <div class="info">Librerías de controles a cargar, los controles disponibles dependen de las librarias
            cargadas.</div>
          <div class="layout vertical">
            <div data-$="control-libraries" class="layout horizontal middle small">
              <div data-#="" class="main"></div>
              <i class="fa-solid fa-trash"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>