<gstock-pagination size="small" current-page="3" total-pages="8" total-items="80" page-size="10">
</gstock-pagination>

<gstock-pagination size="medium" current-page="3" total-pages="8" total-items="80" page-size="10">
</gstock-pagination>

<gstock-pagination size="large" current-page="3" total-pages="8" total-items="80" page-size="10">
</gstock-pagination>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const paginations = document.querySelectorAll('gstock-pagination');

    paginations.forEach(pagination => {
      pagination.addEventListener('gstock-page-change-event', event => {
        pagination.currentPage = event.detail.currentPage;
      });
    });
  });
</script>

<gstock-pagination current-page="3" total-pages="10" total-items="150" page-size="15" show-info>
</gstock-pagination>

<!-- With info positioned at bottom -->
<div style="margin-top: 2rem">
  <gstock-pagination
    current-page="3"
    total-pages="10"
    total-items="150"
    page-size="15"
    show-info
    info-position="bottom">
  </gstock-pagination>
</div>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const paginations = document.querySelectorAll('gstock-pagination');

    paginations.forEach(pagination => {
      pagination.addEventListener('gstock-page-change-event', event => {
        pagination.currentPage = event.detail.currentPage;
      });
    });
  });
</script>

<gstock-pagination
  current-page="3"
  total-pages="10"
  total-items="150"
  page-size="15"
  show-info
  info-position="top">
</gstock-pagination>

<div style="margin-top: 1rem">
  <label for="position-select">Posición de la información:</label>
  <gstock-select id="position-select" value="top">
    <gstock-option value="top">Top</gstock-option>
    <gstock-option value="bottom">Bottom</gstock-option>
    <gstock-option value="left">Left</gstock-option>
    <gstock-option value="right">Right</gstock-option>
  </gstock-select>
</div>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const pagination = document.querySelector('gstock-pagination');
    const select = document.querySelector('#position-select');

    // Handle pagination changes
    pagination.addEventListener('gstock-page-change-event', event => {
      pagination.currentPage = event.detail.currentPage;
    });

    // Handle position changes
    select.addEventListener('gstock-change-event', event => {
      const newPosition = event.target.value;
      pagination.setAttribute('info-position', newPosition);
    });
  });
</script>

<style>
  label {
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: 500;
  }
</style>

<gstock-pagination
  current-page="5"
  total-pages="15"
  total-items="300"
  page-size="20"
  show-first-last>
</gstock-pagination>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const pagination = document.querySelector('gstock-pagination');

    pagination.addEventListener('gstock-page-change-event', event => {
      pagination.currentPage = event.detail.currentPage;
    });
  });
</script>

<gstock-pagination current-page="8" total-pages="20" total-items="400" page-size="20" max-pages="3">
</gstock-pagination>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const pagination = document.querySelector('gstock-pagination');

    pagination.addEventListener('gstock-page-change-event', event => {
      pagination.currentPage = event.detail.currentPage;
    });
  });
</script>

<gstock-pagination
  current-page="3"
  total-pages="8"
  total-items="80"
  page-size="10"
  disabled
  show-info>
</gstock-pagination>

<div style="margin-top: 1rem">
  <gstock-button id="toggle-disabled" size="small">Habilitar paginación</gstock-button>
  <p
    style="
      margin-top: 0.5rem;
      font-size: var(--gstock-legacy-font-size-sm);
      color: var(--gstock-legacy-color-grayscale-600);
    ">
    Cuando está deshabilitada, la paginación no responde a clicks y se muestra con opacidad
    reducida.
  </p>
</div>

<script type="module">
  customElements.whenDefined('gstock-pagination').then(() => {
    
    const pagination = document.querySelector('gstock-pagination');
    const toggleBtn = document.querySelector('#toggle-disabled');

    let isDisabled = true;

    toggleBtn.addEventListener('click', () => {
      isDisabled = !isDisabled;
      pagination.disabled = isDisabled;
      toggleBtn.textContent = isDisabled ? 'Habilitar paginación' : 'Deshabilitar paginación';
    });

    // Handle pagination changes when enabled
    pagination.addEventListener('gstock-page-change-event', event => {
      if (!pagination.disabled) {
        pagination.currentPage = event.detail.currentPage;
      }
    });
  });
</script>

<gstock-pagination
  id="pagination-events"
  current-page="3"
  total-pages="10"
  total-items="100"
  page-size="10"
  show-info>
</gstock-pagination>

<div style="margin-top: 1rem">
  <h4>Log de eventos:</h4>
  <div id="event-log"></div>
  <gstock-button id="clear-log" size="small" variant="outline">Limpiar log</gstock-button>
</div>

<script type="module">
  const pagination = document.getElementById('pagination-events');
  const eventLog = document.getElementById('event-log');
  const clearLogBtn = document.getElementById('clear-log');

  function logEvent(eventType, detail) {
    const timestamp = new Date().toLocaleTimeString();
    const message = `${eventType} - Página anterior: ${detail.previousPage}, Página actual: ${detail.currentPage}`;

    const logEntry = document.createElement('div');
    logEntry.className = 'log-entry';
    logEntry.innerHTML = `<span class="timestamp">[${timestamp}]</span> <span class="message">${message}</span>`;

    eventLog.appendChild(logEntry);
    eventLog.scrollTop = eventLog.scrollHeight;
  }

  // Handle pagination changes
  pagination.addEventListener('gstock-page-change-event', event => {
    logEvent('gstock-page-change-event', event.detail);
    pagination.currentPage = event.detail.currentPage;
  });

  clearLogBtn.addEventListener('click', () => {
    eventLog.innerHTML = '';
  });
</script>

<style>
  h4 {
    margin: 0 0 0.5rem 0;
    color: var(--gstock-legacy-color-grayscale-700);
  }

  #event-log {
    border: 1px solid var(--gstock-legacy-color-grayscale-300);
    border-radius: var(--gstock-border-radius-sm);
    padding: 1rem;
    height: 150px;
    overflow-y: auto;
    background-color: var(--gstock-legacy-color-grayscale-50);
    font-family: var(--gstock-legacy-font-mono);
    font-size: var(--gstock-legacy-font-size-sm);
    margin-bottom: 0.5rem;
  }

  .log-entry {
    margin-bottom: 0.25rem;
    line-height: 1.4;
  }

  .timestamp {
    color: var(--gstock-legacy-color-grayscale-500);
    font-weight: 500;
  }

  .message {
    color: var(--gstock-legacy-color-grayscale-700);
  }

  #event-log:empty::before {
    content: 'Haga clic en los botones de paginación para ver los eventos...';
    color: var(--gstock-legacy-color-grayscale-400);
    font-style: italic;
  }
</style>