{% extends "base.html" %}
{% block title %}Table Control - Kinetic Sand Table{% endblock %}

{% block additional_styles %}
/* Dark mode styles for table control page */
.dark .bg-white {
  background-color: #262626;
}
.dark .text-slate-900 {
  color: #e5e5e5;
}
.dark .text-slate-800 {
  color: #e5e5e5;
}
.dark .text-slate-700 {
  color: #d1d5db;
}
.dark .border-slate-200 {
  border-color: #404040;
}
.dark .border-slate-300 {
  border-color: #404040;
}
.dark .bg-slate-50 {
  background-color: #262626;
}
.dark .hover\:bg-slate-50:hover {
  background-color: #404040;
}
.dark .form-input {
  background-color: #262626;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-input::placeholder {
  color: #9ca3af;
}
.dark .form-input:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark .focus\:ring-sky-500:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:border-sky-500:focus {
  border-color: #0c7ff2;
}
.dark .focus\:ring-blue-400:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:ring-red-400:focus {
  ring-color: #ef4444;
}
.dark .focus\:ring-slate-400:focus {
  ring-color: #525252;
}
.dark .focus\:ring-offset-2 {
  ring-offset-color: #262626;
}
{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-4xl gap-8 pt-2 pb-[75px]">
  <div class="flex flex-wrap justify-between items-center gap-4 p-4 bg-white rounded-xl shadow-sm mt-2 sm:mt-8">
    <h1 class="text-slate-900 tracking-tight text-2xl sm:text-3xl font-bold leading-tight">
      Table Control
    </h1>
  </div>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Movement Controls
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <button
        id="homeButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-blue-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">home</span>
        Home
      </button>
      <button
        id="stopButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-red-600 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">stop_circle</span>
        Stop
      </button>
      <button
        id="centerButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-slate-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-slate-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">filter_center_focus</span>
        Move to Center
      </button>
      <button
        id="perimeterButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-slate-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-slate-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">all_out</span>
        Move to Perimeter
      </button>
    </div>
    <div class="flex items-center justify-center mt-4">
      <button
        id="orientationHelpButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">help_outline</span>
        How to Align Pattern Orientation
      </button>
    </div>
  </section>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Speed Control
    </h2>
    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
      <div class="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-2 w-full sm:w-auto">
        <span class="text-sm font-medium text-slate-700">Current:</span>
        <span id="currentSpeedDisplay" class="text-sm font-semibold text-slate-900">-- mm/s</span>
      </div>
      
      <div class="flex flex-col sm:flex-row gap-3 w-full sm:flex-1">
        <div class="flex-1">
          <input
            type="number"
            id="speedInput"
            class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-3 text-sm font-normal leading-normal transition-colors"
            placeholder="Enter new speed..."
            min="1"
            step="1"
          />
        </div>
        <button
          id="setSpeedButton"
          class="flex items-center justify-center gap-2 rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md hover:bg-sky-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2 h-10 w-full sm:w-auto whitespace-nowrap"
        >
          <span class="material-icons-outlined text-lg">speed</span>
          Set Speed
        </button>
      </div>
    </div>
  </section>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Clear Patterns
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <button
        id="clearCenterButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">center_focus_strong</span>
        Clear from Center
      </button>
      <button
        id="clearPerimeterButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">all_out</span>
        Clear from Perimeter
      </button>
      <button
        id="clearSidewaysButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">swap_horiz</span>
        Clear Sideway
      </button>
    </div>
  </section>
</div>

<!-- Pattern Orientation Help Modal -->
<div id="orientationHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md">
    <div class="p-6">
      <div class="text-center mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Pattern Orientation Alignment</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm">
          Follow these steps to align your patterns with their previews:
        </p>
      </div>
      
      <ol class="text-gray-700 dark:text-gray-300 text-sm space-y-3 mb-6">
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">1.</span>
          <span>Look at your pattern preview and decide where the "bottom" of the pattern should be.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">2.</span>
          <span><strong>Manually</strong> move the radial arm to point 90° to the right of where you want the pattern bottom to be.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">3.</span>
          <span>Click the <strong>"Home"</strong> button to establish this as the reference position.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">4.</span>
          <span>All patterns will now be oriented according to their previews!</span>
        </li>
      </ol>
      
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4 mb-4">
        <p class="text-amber-600 dark:text-amber-400 text-sm">
          <strong>Important:</strong> Only perform this alignment when you want to change the orientation reference. Once set, this becomes your new "home" position.
        </p>
      </div>
      
      <div class="flex justify-center">
        <button
          id="closeOrientationHelpModal"
          class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
        >
          Got it
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/table_control.js"></script>
<script>
// Pattern orientation help modal functionality
document.addEventListener('DOMContentLoaded', function() {
  const helpButton = document.getElementById('orientationHelpButton');
  const modal = document.getElementById('orientationHelpModal');
  const closeButton = document.getElementById('closeOrientationHelpModal');
  
  helpButton.addEventListener('click', () => {
    modal.classList.remove('hidden');
  });
  
  closeButton.addEventListener('click', () => {
    modal.classList.add('hidden');
  });
  
  // Close modal when clicking outside
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.classList.add('hidden');
    }
  });
});
</script>
{% endblock %}