{% extends "base.html" %}

{% block header %}
<h1>🖼️ Welcome to Easy Image Labeling</h1>
{% endblock %}

{% block content %}
<p>This app helps you label images quickly and easily through a local web interface. Follow the steps below to build and export your own labeled datasets.</p>
<div class="container mt-4" style="text-align: left; margin-left: 30%">
  <hr style="margin-left: -45%;">

  <h3>How to Use</h3>

  <h4>🔧 1. Manage Datasets (via <em>Edit Dataset</em>)</h4>
  <ul>
    <li>
      <strong>Add dataset</strong>
      <ol>
        <li>Choose how many classes (categories) your dataset should have.</li>
        <li>Name each of the classes.</li>
        <li>Upload your images by selecting a folder from your computer (all images in the folder will be included).</li>
        <li>Give your dataset a name.</li>
      </ol>
    </li>
    <li>
      <strong>Remove dataset</strong>
      <ul>
        <li>Select any previously added dataset to delete it from the application.</li>
      </ul>
    </li>
    <li>
      <strong>Modify datasets</strong>
      <ul>
        <li>Add or remove images from datasets.</li>
      </ul>
    </li>
  </ul>

  <h4>🏷️ 2. Label Images (via <em>Classify Dataset</em>)</h4>
  <ul>
    <li>Hover over <strong>"Classify Dataset"</strong> and click on any dataset you've uploaded.</li>
    <li>The app will show you the <strong>last unlabeled image</strong> in the dataset.</li>
    <li>At the bottom, you'll see all your defined categories:
      <ul>
        <li>Click a category to assign the image to it.</li>
        <li>Click <strong>"Skip"</strong> to mark the image as <em>Unknown</em>.</li>
        <li>Click <strong>"Back"</strong> to return to the previous image (regardless of label).</li>
      </ul>
    </li>
    <li>After labeling or skipping, the next image will load automatically.</li>
    <li>When all images are labeled or skipped, you'll see a <strong>summary screen</strong>:
      <ul>
        <li>Review how many images were skipped.</li>
        <li>Optionally repeat the labeling process for only the skipped images.</li>
      </ul>
    </li>
  </ul>

  <h4>📤 3. Export Labeled Data (via <em>Export</em>)</h4>
  <ul>
    <li>Go to the <strong>Export</strong> page.</li>
    <li>Select a dataset and export its label mappings as a <code>.csv</code> or <code>.json</code> file.</li>
  </ul>
</div>
{% endblock %}