{% extends "base.html" %}
{% load static %}

{% block title %}Projects · {{ site_title }}{% endblock %}

{% block content %}



<div class="m-4 flex flex-row items-end">

    <div><!-- top, LHS (h1) -->
        <h1 class="text-4xl mt-4 font-bold">Projects</h1>
    </div>

    {# align to bottom #}
    <div class="ml-auto"><!-- top, RHS (buttons) -->
        {% if can_create %}
        <div>
            <a class="block font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md" href="{% url 'project_new' %}">New Project</a>
        </div>
        {% endif %}
    </div> {# top, RHS (buttons) #}
</div>



<div class="m-4"><!-- main content -->

<div class="flex bg-slate-50 mt-4 items-end">
    <div class="flex">
    <a href="{% url "project_list_mine" %}"><div class="p-4 font-bold text-xl hover:bg-slate-200 {% if ownership_filter == "mine" %}text-cyan-500 border-cyan-500 border-b-4 {% else %}text-slate-500 hover:border-b-4 hover:border-slate-400{% endif %}">My Projects</div></a>
    {% if not app_settings.SINGLE_USER %}
    <a href="{% url "project_list_teams" %}"><div class="p-4 font-bold text-xl hover:bg-slate-200 {% if ownership_filter == "teams" %}text-cyan-500 border-cyan-500 border-b-4 {% else %}text-slate-500 hover:border-b-4 hover:border-slate-400{% endif %}">Other Team Projects</div></a>
    <a href="{% url "project_list_other" %}"><div class="p-4 font-bold text-xl hover:bg-slate-200 {% if ownership_filter == "other" %}text-cyan-500 border-cyan-500 border-b-4 {% else %}text-slate-500 hover:border-b-4 hover:border-slate-400{% endif %}">Other Projects</div></a>
    {% endif %}
    </div>
    {% comment %}
    <div class="ml-auto p-2">
        <input type="text" name="search" placeholder="search projects..." class="focus:border-cyan-500 focus:ring-cyan-200 rounded-md"/>
    </div>
    {% endcomment %}
</div>

    <div>

      <form action="." method="post">
      {% csrf_token %}

      <table class="w-full">
      <tbody>
            {% for project in project_list %}
            <tr class="bg-white border-slate-200 border-b-2">
            <td class="w-full p-4">
                <div>
                    {% if project.member or request.user.is_superuser %}
                    <a href="/issues/{{ project.id }}" class="text-xl text-cyan-500 font-bold">{{ project.name }}</a>
                    {% else %}
                    <span class="text-xl text-slate-800 font-bold">{{ project.name }}</span>
                    {% endif %}
                </div>
                <div>
                    {{ project.team.name }}
                    | {{ project.member_count }} members
                    | {{ project.open_issue_count }} open issues
                    {% if project.member %}
                    | <a href="{% url 'project_member_settings' project_pk=project.id user_pk=request.user.id %}" class="font-bold text-cyan-500">my settings</a>
                    {% endif %}
                </div>
            </td>
            <td class="pr-2 text-center">
                {% if project.member %}
                    {% if not project.member.accepted %}
                    <span class="bg-slate-100 rounded-2xl px-4 py-2 ml-2 text-sm">You're&nbsp;invited!</span>
                    {% elif project.member.is_admin %} {# NOTE: we intentionally hide admin-ness for non-accepted users; #}
                    <span class="bg-cyan-100 rounded-2xl px-4 py-2 ml-2 text-sm">Admin</span>
                    {% endif %}
                {% endif %}
            </td>

            <td class="pr-2">
                {% if not app_settings.SINGLE_USER %}{% if project.member.is_admin or request.user.is_superuser %}
                <div class="rounded-full hover:bg-slate-100 p-2 cursor-pointer" onclick="followContainedLink(this);" >
                    <a href="{% url 'project_members' project_pk=project.id %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
    </svg>
                    </a>
                </div>
                {% endif %}{% endif %}
            </td>

            <td class="pr-2">
                {% if project.member.is_admin or request.user.is_superuser %}
                <div class="rounded-full hover:bg-slate-100 p-2 cursor-pointer"onclick="followContainedLink(this);" >
                    <a href="{% url 'project_edit' project_pk=project.id %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                        </svg>
                    </a>
                </div>
                {% endif %}
            </td>

            <td class="pr-2">
                {% if project.member or request.user.is_superuser %}
                <div class="rounded-full hover:bg-slate-100 p-2 cursor-pointer" onclick="followContainedLink(this);" >
                    <a href="{% url 'project_sdk_setup' project_pk=project.id %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
                        </svg>
                    </a>
                </div>
                {% endif %}
            </td>

            <td>
                {% if project.member %}
                    {% if not project.member.accepted %}
                        <div>
                            <a href="{% url 'project_members_accept' project_pk=project.id %}" class="font-bold text-cyan-500">Invitation</a>
                        </div> 
                    {% else %}
                        <div>
                            <button name="action" value="leave:{{ project.id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 active:ring rounded-md">Leave</button>
                        </div> 
                    {% endif %}
                {% else %}
                    {% if project.is_joinable or request.user.is_superuser %}
                        <div>
                            <button name="action" value="join:{{ project.id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 active:ring rounded-md">Join</button>
                        </div>
                    {% endif %}
                {% endif %}
            </td>

            </tr>
            {% empty %}
            <tr class="bg-white border-slate-200 border-b-2">
            <td class="w-full p-4">
                No projects found.
            </td>

            </tr>
            {% endfor %}
        </tbody>
        </table>

        </form>
    </div>


</div>

</div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/project_list.js' %}"></script>
{% endblock %}
