{% extends "templates/base.html" %}
{% block title %}{{ hackathon }}{% endblock %}
{% from "www/hackathons/macros/hero.html" import hero %}
{% from "www/hackathons/macros/card.html" import null_card %}
{% from "www/hackathons/macros/user.html" import show_user %}
{% block head_include %}
<meta name="description" content="{{ 'Hackathon' }}" />
<meta name="keywords" content="An app that supports Communities" />
<style>
    div.card-hero-img {
        height: 220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(250, 251, 252);
    }

    .card-image-wrapper {
        display: flex;
        overflow: hidden;
        height: 220px;
        background-color: rgb(250, 251, 252);
        justify-content: center;
    }

    .image-body {
        align-self: center;
        color: #d1d8dd;
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
        padding: 20px;
    }

    section {
        padding: 5rem 0 5rem 0;
    }
</style>
{% endblock %}


{% block content %}
<section class="section">
    {{ hero(project, {'name': hackathon, 'url': '/hackathons/hackathon?hackathon=' + hackathon}) }}
    <div class='container'>
        {% if project %}
            <h1 class="mb-2">{{project.project_name}}</h1>

            {% if frappe.session.user != "Guest" %}
                {% if is_owner %}
                    <p>
                        <div class="badge badge-info">Owner</div>
                    </p>
                {% endif %}
                {% if is_member %}
                    <p>
                        <div class="badge badge-info">Member</div>
                    </p>
                {% endif %}
            {% endif %}

            <p>{{ project.project_short_intro[:220] }}</p>
            {% if project.repository_link %}
                <a href="{{ project.repository_link }}" class="btn btn-default btn-sm" target="_blank">Respository</a>
            {% endif %}
            {% if project.video_link %}
                <a href="{{ project.video_link }}" class="btn btn-default btn-sm" target="_blank">Video ▶️</a>
            {% endif %}
            <button class="btn btn-default btn-sm btn-like" data-project={{project.name}}>👍</button>

            <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                        aria-selected="true">Readme</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="members-tab" data-toggle="tab" href="#members" role="tab"
                        aria-controls="members" aria-selected="false">Members ({{ confirmed_members|len + 1}})</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="updates-tab" data-toggle="tab" href="#updates" role="tab"
                        aria-controls="updates" aria-selected="false">Updates ({{ (updates|len) + 1 }})</a>
                </li>
            </ul>

            <div class="tab-content">

                <!-- readme -->
                <div class="tab-pane fade show active py-4 markdown-style" id="home" role="tabpanel"
                    aria-labelledby="home-tab">
                    {{ frappe.utils.md_to_html(project.project_description or "No README created yet") }}
                </div>


                <div class="tab-pane fade py-4" id="members" role="tabpanel" aria-labelledby="members-tab">

                    <!-- members -->
                    <div class="list-group">
                        <!-- owner -->
                        <div class="list-group-item">{{ show_user(project.owner) }}</div>
                        <!-- all members -->
                        {% for member in members %}
                            {% set is_user = member.owner == frappe.session.user %}
                            {% set is_pending = is_user and member.status=="Pending" %}
                            {% if member.status == "Accepted" %}
                                <div class="list-group-item">
                                    {{ show_user(member.owner) }}
                                    {% if is_user %}
                                        <button data-request-id="{{ member.name }}"
                                            class="btn btn-sm btn-default btn-leave ml-4">Leave</button>
                                    {% endif %}
                                </div>
                            {% elif member.status == "Pending" and is_owner %}
                            <div class="list-group-item">Join request from: <b>{{ show_user(member.owner) }}</b>
                                <p class="alert alert-warning mt-2">{{ member.intro }}</p>
                                <div class="my-3">
                                    <button data-request-id="{{ member.name }}"
                                        class="btn btn-sm btn-secondary btn-accept">Accept</button>
                                    <button data-request-id="{{ member.name }}"
                                        class="btn btn-sm btn-default btn-reject">Reject</button>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>

                    {% if frappe.session.user != 'Guest' %}
                    <!-- join / pending -->
                    {% if not (my_project or is_member or is_pending) and project.accepting_members %}
                    <a class="btn btn-sm btn-secondary mt-2"
                        href="/join-request?new=1&project={{ project.name }}&project_name={{ project.project_name }}">Join
                        {{ project.project_name }}</a>
                    {% elif is_pending %}
                    <p class="alert alert-warning mt-2">Your application is pending</p>
                    {% endif %}
                    {% endif %}
                </div>

                <!-- updates -->
                <div class="tab-pane fade py-4" id="updates" role="tabpanel" aria-labelledby="updates-tab">

                    {% macro add_update(update, date) %}
                    <div class='list-group-item'>
                        {{ frappe.utils.md_to_html(update or '') }}
                        <div class="small text-muted text-right">{{ frappe.utils.format_datetime(date, "medium") }}</div>
                    </div>
                    {% endmacro %}

                    {% if frappe.session.user != 'Guest' and (is_owner or is_member) %}
                    <p>
                        <a href="/project-update?new=1&project={{ project.name }}&hackathon={{ hackathon }}" class="btn btn-secondary btn-sm">Add
                            Update</a>
                    </p>
                    {% endif %}


                    <div class='list-group'>

                        <!-- updates -->
                        {% for update in updates %}
                        {{ add_update(update.project_update, update.creation) }}
                        {% endfor %}

                        <!-- creation -->
                        {{ add_update("Project created by " + frappe.db.get_value('User', project.owner, 'full_name'),
                        project.creation) }}

                    </div>
                </div>
            </div>
            {% endif %}
    </div>
</section>
{% endblock %}