{% extends "mobile-layout.html" %} {% import "wtf.html" as wtf %} {% macro sentence_case(text) %} {{ text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}
<script>
    function searchSort() {
        var drowdown = document.getElementById('SortByDropdown');
        var myform = document.getElementById('sortby');
        let url = window.location.href;
        let dropdown_value = drowdown.value;
        const urlSearchParams = new URLSearchParams(window.location.search);
        const params = Object.fromEntries(urlSearchParams.entries());

        if (url.includes("search")) {
            if (url.includes("sortby")) {
                url = url.replace(params['sortby'], dropdown_value);
            } else {
                url += '&sortby=' + dropdown_value;
            }
        } else {
            if (url.includes("sortby")) {
                url = url.replace(params['sortby'], dropdown_value);
            } else {
                url += '?sortby=' + dropdown_value;
            }
        }
        location.replace(url);
    }
</script>

<a href="" class="banner row no-underline" style="margin: 0px; margin-bottom: 20px; display:none;">
    <div class="col-md-10" style="padding: 0px;">
        <h6 class="black-text no-margin-bottom" style="font-weight: 500;">Welcome to Crowd.Inc, your crowd powered dream incubator. Our first Crowd.Inc prize of <b>$500</b> is set to be awarded to the best performing project with the most stars on Jan 1st, 2022. Click here to find out more about how the prize works.</h6>
    </div>
    <div class="col-md-2 d-flex align-items-center bold justify-content-end">
        View details >
    </div>
</a>

<article class="page-header d-flex row-gap align-items-center" style="padding: 10px">
    <div style="width: 100%;">
        <form action="/projects" method="GET" class="row" style="margin: 0px;">
            <input type="text" name="search" class="search-field" style="width: 83%;" {% if search_query=="" %} placeholder="Search in projects" {% else %} placeholder="{{search_query}}" {% endif %}>
            <button type="submit" value="Search" class="btn-search" style="width: 17%;">
                    <svg version="1.1" id="Layer_1" width="22" height="22" fill=#2D355F
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
                        <path
                            d="M90.4,83L75.8,68.5C87.2,53.9,86,33.1,72.9,20C66,13.1,56.8,9.3,47,9.3S28,13.1,21.1,20S10.4,36.1,10.4,45.9s3.8,19,10.7,25.9S37.2,82.5,47,82.5c8.1,0,16.1-2.7,22.5-7.8L84,89.4c0.9,0.9,2,1.3,3.2,1.3s2.3-0.5,3.2-1.3C92.2,87.7,92.2,84.8,90.4,83z M74.6,45.9c0,7.4-2.9,14.3-8.1,19.5S54.3,73.5,47,73.5s-14.3-2.9-19.5-8.1s-8.1-12.2-8.1-19.5c0-7.4,2.9-14.3,8.1-19.5s12.2-8.1,19.5-8.1c7.4,0,14.3,2.9,19.5,8.1S74.6,38.5,74.6,45.9z" />
                    </svg>
                </button>
        </form>
    </div>
    <a style="width: 100%;" class="d-flex justify-content-center no-underline" href="{{ url_for('new_project') }}">
        <button class="button-add" style="width: 100%;"><i class="fa fa-plus fa-sm"
            style="color: white; margin-right: 10px;"></i>Create a Project</button>
    </a>
</article>

<div class="d-flex align-items-center">
    <h3 class="bold" style="margin-bottom: 10px;">Projects for {{ sentence_case(current_tag.title) }}</h3>
</div>

{% endblock header %} {% block content %}
<div class="row row-gap d-flex align-items-center" style="margin-left: 5px;">
    <h6 class="label">SORT BY:</h6>
    <form id="sortby">
        <div class="select-wrapper"><select id="SortByDropdown" name="sortby" class="dropdown-sml" onchange="searchSort()">
                <option {% if index==0 %} selected {% endif %} value="Stars">Stars</option>
                <option {% if index==1 %} selected {% endif %} value="Comments">Comments</option>
                <option {% if index==2 %} selected {% endif %} value="Newest">Newest</option>
                <option {% if index==3 %} selected {% endif %} value="Oldest">Oldest</option>
            </select>
        </div>
    </form>
</div>
{% for project in projects %}
<article class="media content-section" style="padding: 20px;">
    <div class="media-body">
        <h3><a class="article-title" href="{{ url_for('project', project_name=project.slug) }}">{{
                sentence_case(project.goal) }}</a></h3>
        <div class="row">
            <div class="col-md-9 height-gap flex-column">
                <div class="article-metadata">
                    {% for tag in project.tags %}
                    <a class="badge badge-light transparent-tag" style="margin-top: 6px;" href="{{ url_for('category', tag_id=tag.id) }}">{{
                        sentence_case(tag.title) }}</a> {% endfor %}
                </div>
                <div class="row-gap d-flex align-items-center" style="margin-top: 4px;">
                    <img class="rounded-circle" style="width:32px;" src="{{ url_for('static', filename='profile_pics/' + project.poster.image_file) }}">
                    <h6 class="grey-text" style="padding-top:10px; font-size: 14px;">
                        <a href="{{ url_for( 'user_profile', username=project.poster.username) }}" class="bold" style="color: white;">
                            {{ project.poster.username }}
                        </a> • {{ project.elapsed_time() }}
                    </h6>
                </div>
            </div>
            <div class="row-gap justify-content-end" style="margin-top: 15px; margin-left: 20px;">
                <a class="row-gap justify-content-end" style="margin-right: 5px;" href="#" data-toggle="tooltip" title="Stars receieved">
                    <h5 class="bold">
                        {% if project.star_count > 0 %} {{ project.star_count }} {% else %} 0 {% endif %}
                    </h5>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFB900" class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                </a>
                <a class="row-gap justify-content-end" href="#" data-toggle="tooltip" title="Comments receieved">
                    <h5 class="bold">{{ project.comment_count }}</h5>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00D1FF" class="bi bi-chat-fill" viewBox="0 0 16 16">
                            <path
                                d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z" />
                        </svg>
                </a>
            </div>
            <div class="col-md-3">
                <a class="d-flex flex-column-reverse no-underline" style="margin-top: 10px;" href="{{ url_for('project', project_name=project.slug) }}">
                    <button class="button-view">View Project<i class="fa fa-caret-right fa-lg"
                            style="color: #157ffb; margin-left: 10px;"></i></button>
                </a>
            </div>
        </div>
    </div>
</article>
{% endfor %} {% endblock content %} {% block sidebar %}
<ul class="list-group">
    <h6 class="label" style="margin-top: 12px; margin-bottom: 12px;">TARGET USER GROUPS:</h6>
    <a class="list-group-item row-gap" href="{{ url_for('home') }}">
        <div class="d-flex align-items-center" style="width:65%;">
            Everyone
        </div>
        <div class="d-flex justify-content-end" style="width: 30%;">
            <div class="highlight-box" style="padding: 8px 15px;">
                <h6 class="bold no-margin-bottom">{{ project_count }}</h6>
            </div>
        </div>
    </a>
    {% for tag in sorted_tag_list %} {% if current_tag != tag[0] %}
    <a class="list-group-item row-gap" href="{{ url_for('category', tag_id=tag[0].id) }}">
        <div class="d-flex align-items-center" style="width:65%;">
            {{ sentence_case(tag[0].title) }}
        </div>
        <div class="d-flex justify-content-end" style="width: 30%;">
            <div class="highlight-box" style="padding: 8px 15px;">
                <h6 class="bold no-margin-bottom">{{ tag[0].getProjectCount() }}</h6>
            </div>
        </div>
    </a>
    {% else %}
    <a class="list-group-item row-gap" style="background: white" href="{{ url_for('category', tag_id=tag[0].id) }}">
        <div class="d-flex align-items-center black-text" style="width:65%;">
            {{ sentence_case(current_tag.title) }}
        </div>
        <div class="d-flex justify-content-end" style="width: 30%;">
            <div class="highlight-box" style="background-color:#e8ebf3; padding: 8px 15px;">
                <h6 class="bold black-text no-margin-bottom">{{ tag[0].getProjectCount() }}</h6>
            </div>
        </div>
    </a>
    {% endif %} {% endfor %}
</ul>
{% endblock sidebar %}