Pagination

<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>

<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>

<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="1" total-pages="10" total-items="250" page-size="25" show-page-size-selector show-info></gstock-pagination>

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

    pagination.addEventListener('gstock-page-change-event', event => {
      console.log('Page changed:', event.detail);
      pagination.currentPage = event.detail.currentPage;
    });

    pagination.addEventListener('gstock-page-size-change-event', event => {
      console.log('Page size changed:', event.detail);

      // Update pagination properties
      pagination.pageSize = event.detail.currentPageSize;
      pagination.currentPage = event.detail.currentPage;

      // Recalculate total pages based on new page size
      const totalPages = Math.ceil(pagination.totalItems / event.detail.currentPageSize);
      pagination.totalPages = totalPages;
    });
  });
</script>

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

<div class="pagination-events-section">
  <h4>Log de eventos:</h4>
  <div id="event-log"></div>
  <gstock-button id="clear-log" size="small">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>
  .pagination-events-section {
    margin-top: 1rem;
  }

  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>