{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% block title %}
    Manage Domains
{% endblock title %}
{% block description %}
    View and manage all your domains efficiently. Add new domains, edit existing ones, or delete those you no longer need to maintain an updated system.
{% endblock description %}
{% block keywords %}
    Manage Domains, Domain Management, Add Domain, Edit Domain, Delete Domain, View Domains
{% endblock keywords %}
{% block og_title %}
    Manage Domains - Efficient Domain Management
{% endblock og_title %}
{% block og_description %}
    Easily view, add, edit, or delete domains. Keep your domain list organized and up-to-date with our management tools.
{% endblock og_description %}
{% block body %}
    <div class="fixed bottom-2.5 right-3.75">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/organization/organization_manage_domains.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="bg-[#F3F5F7] w-full h-full flex flex-col items-center">
        <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Manage Domains</p>
            <div class="w-full md:w-[15%] flex justify-center md:justify-end mr-10">
                <a href="{% url 'add_domain' organization %}"
                   class="flex items-center justify-center md:justify-center px-16 py-7 bg-[#DC4654] rounded-xl hover:bg-red-600 transition-all">
                    <i class="fa-sharp fa-solid fa-plus fa-xl text-white"></i>
                </a>
            </div>
        </div>
        <div class="w-[96%] max-h-[70vh] p-4 mt-10 bg-white border border-gray-200 rounded-lg shadow-md sm:p-8">
            <div class="flex items-center justify-between mb-4">
                <h5 class="text-xl font-bold leading-none text-gray-900">All Domains</h5>
                <a href="#" class="text-sm font-medium text-blue-600 hover:underline">View all</a>
            </div>
            <div class="flow-root h-full mt-5">
                <ul role="list" class="divide-y divide-gray-200 px-5 overflow-y-scroll">
                    {% for domain in domains %}
                        <li class="py-3 sm:py-4">
                            <div class="flex items-center space-x-4">
                                <div class="flex-shrink-0">
                                    <img class="w-8 h-8 rounded-full"
                                         src="{% if domain.logo %}{{ MEDIA_URL }}{{ domain.logo }}{% else %}https://via.placeholder.com/50?text=No+Logo{% endif %}"
                                         alt="Domain Logo"
                                         width="32px"
                                         height="32px">
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 truncate">{{ domain.name | capfirst }}</p>
                                    <p class="text-sm text-gray-500 truncate">{{ domain.url }}</p>
                                </div>
                                <div class="inline-flex items-center text-base font-semibold text-gray-900">
                                    <a href="{% url 'edit_domain' organization domain.id %}">Edit</a>
                                    <a class="ml-4" href="{% url 'view_domain' domain.id %}">View</a>
                                    <form id="deleteForm"
                                          action="{% url 'add_domain' organization %}"
                                          method="post"
                                          class="inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="_method" value="delete">
                                        <input type="hidden" name="domain_id" value="{{ domain.id }}">
                                        <button type="submit"
                                                class="ml-4"
                                                onclick="return confirm('Are you sure you want to delete this domain?')">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock body %}