{% extends "mobile-layout.html" %} {% macro sentence_case(text) %} {{ text[0]|upper}}{{text[1:] }} {% endmacro %} {%
block header %}
<script src="{{url_for('static', filename='infiniteScroll.js')}}"></script>
<script src="{{url_for('static', filename='searchSort.js')}}"></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('project_bp.new_project') }}">
        <button class="button-add" style="width: 100%;"><i class="fa fa-plus fa-sm"
                style="color: white; margin-right: 10px;"></i>Post a Project</button>
    </a>
</article>

{% endblock header %} {% block content %}
<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
<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="sortProjects()">
                <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>
    <!-- <h6 class="label">DATE POSTED:</h6>
    <form id="timeFilter">
        <div class="select-wrapper"><select id="timeFilterDropdown" name="timeFilter" class="dropdown-sml" onchange="timeFilterProjects()">
                <option {% if filter_index==0 %} selected {% endif %} value="Today">Today</option>
                <option {% if filter_index==1 %} selected {% endif %} value="This_Week">This Week</option>
                <option {% if filter_index==2 %} selected {% endif %} value="This_Month">This Month</option>
                <option {% if filter_index==3 %} selected {% endif %} value="This_Year">This Year</option>
                <option {% if filter_index==4 %} selected {% endif %} value="All_Time">All Time</option>
            </select>
        </div>
    </form> -->
</div>
<div class="x">
    {% if projects|length ==0 %}
    <article class="empty-state">
        no project
    </article>
    {% endif %}
    {% 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_bp.project', project_name=project.slug) }}">
                    {{sentence_case(project.title) }}
                </a>
            </h3>
            <h3 style="font-size: 14px;">
                <a class="article-title" href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                    {{sentence_case(project.tagline) }}
                </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('main_bp.home', 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( 'profile_bp.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_bp.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 %}
</div>
<div style="margin-bottom: 100px;"></div>

{% endblock content %} {% block sidebar %}
<ul class="list-group">
    <h6 class="label" style="margin-top: 12px; margin-bottom: 12px;">TARGET USER GROUPS:</h6>
    <div class="list-group-item row-gap" style="background: white;">
        <div class="d-flex align-items-center black-text" style="width:65%;">
            Everyone
        </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">{{ projects|length }}</h6>
            </div>
        </div>
    </div>
    {% for tag in sorted_tag_list %}
    <a class="list-group-item row-gap" href="{{ url_for('main_bp.home', tag_id=tag[0].id) }}">
        <div class="d-flex align-items-center no-margin-bottom" 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>
    {% endfor %}
</ul>
</p>
{% endblock sidebar %}