{% if result %}
<div id="result-container" class="animate-fade-in">
  <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
    <div class="mb-6 flex items-center space-x-3">
      <div class="bg-green-100 rounded-full p-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6 text-green-600">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-900">Analysis Complete</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div
        class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200 shadow-sm">
        <div class="flex items-center space-x-2 mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5 text-green-600">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <h3 class="font-bold text-green-900">Strengths</h3>
        </div>
        <ul class="space-y-2">
          {% for strength in result.strengths %}
          <li class="flex items-start space-x-2">
            <span
              class="mt-1.5 block w-1.5 h-1.5 rounded-full bg-green-600 shrink-0"></span>
            <span class="text-green-800">{{ strength }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>

      <div
        class="bg-gradient-to-br from-red-50 to-red-100 p-6 rounded-xl border border-red-200 shadow-sm">
        <div class="flex items-center space-x-2 mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5 text-red-600">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <h3 class="font-bold text-red-900">Weaknesses</h3>
        </div>
        <ul class="space-y-2">
          {% for weakness in result.weaknesses %}
          <li class="flex items-start space-x-2">
            <span
              class="mt-1.5 block w-1.5 h-1.5 rounded-full bg-red-600 shrink-0"></span>
            <span class="text-red-800">{{ weakness }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>

      <div
        class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200 shadow-sm">
        <div class="flex items-center space-x-2 mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5 text-blue-600">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
          </svg>
          <h3 class="font-bold text-blue-900">Opportunities</h3>
        </div>
        <ul class="space-y-2">
          {% for opportunity in result.opportunities %}
          <li class="flex items-start space-x-2">
            <span
              class="mt-1.5 block w-1.5 h-1.5 rounded-full bg-blue-600 shrink-0"></span>
            <span class="text-blue-800">{{ opportunity }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>

      <div
        class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-6 rounded-xl border border-yellow-200 shadow-sm">
        <div class="flex items-center space-x-2 mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5 text-yellow-600">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
          <h3 class="font-bold text-yellow-900">Threats</h3>
        </div>
        <ul class="space-y-2">
          {% for threat in result.threats %}
          <li class="flex items-start space-x-2">
            <span
              class="mt-1.5 block w-1.5 h-1.5 rounded-full bg-yellow-600 shrink-0"></span>
            <span class="text-yellow-800">{{ threat }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    {% if result.analysis %}
    <div class="mt-8 bg-gray-50 p-6 rounded-xl border border-gray-200">
      <div class="flex items-center space-x-2 mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-5 h-5 text-gray-600">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
        </svg>
        <h3 class="font-bold text-gray-900">Analysis Summary</h3>
      </div>
      <div id="analysis" class="text-gray-700 leading-relaxed"></div>
    </div>
    <script>
      document.getElementById("analysis").innerHTML = marked.parse(
        `{{ result.analysis|safe }}`,
      );
    </script>
    {% endif %}
  </div>
</div>
{% endif %}