{% extends "base.html" %}
{% block title %}Features – Echo 1.1{% endblock %}

{% block content %}
<section class="max-w-5xl mx-auto">
  <header class="text-center mb-10">
    <h1 class="text-5xl font-bold tracking-tight text-zinc-100">Current Features</h1>
    <p class="mt-3 text-zinc-400 text-lg max-w-2xl mx-auto">
      These features are subject to change throughout the development or this project.
    </p>
  </header>


    <article class="rounded-2xl mb-5 bg-zinc-900 shadow-sm border border-zinc-800 p-6 hover:scale-[1.01] transition-transform">
      <div class="flex items-center space-x-4 mb-5">
        <div class="h-12 w-12 rounded-lg bg-blue-600 flex items-center justify-center">
          <img src="/static/icons/ticket.svg" alt="Ticket icon" class="h-7 w-7 invert brightness-0"/>
        </div>
        <h3 class="text-2xl font-semibold">Basic Ticket submission form</h3>
      </div>
      <p class="mt-2 text-lg font-bold text-zinc-400">
        This includes subject, description, category and priority.
      </p>
      <ul class="mt-3 text-lg text-zinc-400 list-disc list-inside space-y-1">
        <li>Current MVP for ticket submissions</li>
      </ul>
    </article>

    <article class="rounded-2xl mb-5 bg-zinc-900 shadow-sm border border-zinc-800 p-6 hover:scale-[1.01] transition-transform">
      <div class="flex items-center space-x-4 mb-5">
        <div class="h-12 w-12 rounded-lg bg-blue-600 flex items-center justify-center">
          <img src="/static/icons/Form.svg" alt="Form icon" class="h-7 w-7 invert brightness-0"/>
        </div>
        <h3 class="text-2xl font-semibold">Dynamic & Custom Ticket submission form</h3>
      </div>
      <p class="mt-2 text-lg font-bold text-zinc-400">
        This includes subject, description, category and priority.
      </p>
      <ul class="mt-3 text-lg text-zinc-400 list-disc list-inside space-y-1">
        <li>The end user has access to a dynamic ticket submission forms</li>
        <li>The IT agent can customize these forms and populate fields</li>
      </ul>
    </article>

    <article class="rounded-2xl mb-5 bg-zinc-900 shadow-sm border border-zinc-800 p-6 hover:scale-[1.01] transition-transform">
      <div class="flex items-center space-x-4 mb-5">
        <div class="h-12 w-12 rounded-lg bg-blue-600 flex items-center justify-center">
          <img src="/static/icons/metrics.svg" alt="Metrics icon" class="h-7 w-7 invert brightness-0"/>
        </div>
        <h3 class="text-2xl font-semibold">Feedback Metrics</h3>
      </div>
      <p class="mt-2 text-lg font-bold text-zinc-400">
        End users can review their historical ticket submissions. IT agents can track their performance via the percentage of tickets resolved in the performance dashboard
      </p>
      <ul class="mt-3 text-lg text-zinc-400 list-disc list-inside space-y-1">
        <li>Current MVP for ticket submissions</li>
        <li>historic tickets</li>
        <li>Percentage of tickets resolved</li>
      </ul>
    </article>


    <article class="rounded-2xl mb-5 bg-zinc-900 shadow-sm border border-zinc-800 p-6 hover:scale-[1.01] transition-transform">
      <div class="flex items-center space-x-4 mb-5">
        <div class="h-12 w-12 rounded-lg bg-blue-600 flex items-center justify-center">
          <img src="/static/icons/brain.svg" alt="Brain icon" class="h-7 w-7 invert brightness-0"/>
        </div>
        <h3 class="text-2xl font-semibold">Knowledge Base</h3>
      </div>
      <p class="mt-2 text-lg font-bold text-zinc-400">
        The application manager i.e. Me, can access an overview of all the data stored in the current db file 
      </p>
      <ul class="mt-3 text-lg text-zinc-400 list-disc list-inside space-y-1">
        <li>resolutions overview</li>
        <li>User editing for adjusting user privileges </li>
      </ul>
    </article>

    <article class="rounded-2xl mb-5 bg-zinc-900 shadow-sm border border-zinc-800 p-6 hover:scale-[1.01] transition-transform">
      <div class="flex items-center space-x-4 mb-5">
        <div class="h-12 w-12 rounded-lg bg-blue-600 flex items-center justify-center">
          <img src="/static/icons/shield.svg" alt="Shield icon" class="h-7 w-7 invert brightness-0"/>
        </div>
        <h3 class="text-2xl font-semibold">Security</h3>
      </div>
      <p class="mt-2 text-lg font-bold text-zinc-400">
        Role-based access patterns secure data handling, SHA256 password hashing implemented using the python hashlib python library secures passwords.
      </p>
      <ul class="mt-3 text-lg text-zinc-400 list-disc list-inside space-y-1">
        <li>Hashing</li>
        <li>Role based access</li>
        <li>Session management currently being developed</li>
      </ul>
    </article>
  </div>
</section>
{% endblock %}