{# Componente reutilizable para mostrar la descripción del equipo #}
<div class="card mt-2" style="padding: 4px;">
  <p class="small fw-bold mb-1">¿Qué le ocurre al equipo?</p>

  <div class="viewer-descripcion quill-viewer p-2" style="min-height: 75px;"></div>

  <script type="application/json" class="descripcion-data">
    {{ fsc.data.descripcion|json_encode|raw }}
  </script>
</div>


<script>
  document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.viewer-descripcion');
    const dataScripts = document.querySelectorAll('.descripcion-data');

    containers.forEach((el, i) => {
      const rawContent = dataScripts[i].textContent;
      const decodedContent = JSON.parse(rawContent);

      const quill = new Quill(el, {
        theme: 'snow',
        readOnly: true,
        modules: { toolbar: false }
      });

      quill.root.innerHTML = decodedContent;
    });
  });
</script>



<style>
  .quill-viewer .ql-editor {
    padding: 0;
    min-height: 50px;
    font-size: 12px;
  }
  .quill-viewer .ql-container {
    border: none;
  }
</style>