<div id="cookie-example">
  <p id="saved-message"></p>
  <form id="cookie-form">
    <label for="cookie-value">Value to save:</label>
    <input type="text" id="cookie-value" name="cookie-value" class="mb" placeholder="Enter a value">
    <button type="submit" class="primary">Save to Cookie</button>
  </form>
  <button id="delete-btn">Delete Cookie</button>
</div>

<script>
import { saveCookie, getCookie, deleteCookie } from '../src/utils/cookie.js';

// Load saved value on page load
const savedValue = getCookie('example');
if (savedValue) {
  document.getElementById('saved-message').textContent = 
    `Saved value from cookie: ${savedValue}`;
}

// Handle form submission
document.getElementById('cookie-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const value = document.getElementById('cookie-value').value;
  saveCookie('example', value);
  // Page will refresh due to form submission
  window.location.reload();
});

// Delete cookie when delete button is clicked
document.getElementById('delete-btn').addEventListener('click', () => {
  deleteCookie('example');
  window.location.reload();
});
</script>