{% 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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script>
    $(document).ready(function () {
        if (performance.navigation.type != 2) {
            if ("{{toastMessage|safe}}" != "") {
                vt.success("{{toastMessage|safe}}", { position: 'top-right' });
            }
        }
        var closed = $.cookie("closed")

        var urlParams = new URLSearchParams(window.location.search);
        
        if (closed == null && urlParams.has('came_from')) {
            $(".landing-banner").css('display','flex')
        }

        $("#banner-cross").click(function () {
            $.cookie('closed', 'yes', { expires: 1000, path: '/' });
            $(".landing-banner").remove()
        });
    });
</script>

<div class="landing-banner">
    <div>
        <h3>
            Welcome to Crowd.inc 👋🏽
        </h3>
        <p>
            We’re a platform where ideas flourish into reality through peer collaboration. Post your project and share
            your
            goals to bring your ideas closer to reality. Get support from people who believe in your vision.
        </p>
    </div>
    <div id="banner-cross" style="cursor: pointer;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
                fill="#5B58ED" />
        </svg>
    </div>
</div>

<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>
    <div style="width: 100%;">
        <a class="d-flex justify-content-end no-underline" href="{{ url_for('project_bp.new_project') }}">
            <button class="button-add" style="width: -webkit-fill-available;"><i class="fa fa-plus fa-sm"
                    style="color: white; margin-right: 10px;"></i>Post a Project</button>
        </a>
    </div>
</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; margin-bottom: 15px;">
    <h6 class="label" style="padding-bottom: 0; margin: 0;">SORT:</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">
        We weren't able to find any projects matching your search query
    </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" style="font-weight: 500; line-height: 1.3;" href="{{ url_for('project_bp.project', project_name=project.slug) }}">
                    {{sentence_case(project.description) }}
                </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">
                            {{project.star_count}}
                        </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 %}