{% extends "mobile-layout.html" %} {% macro sentence_case(text) %}
{{text[0]|upper}}{{text[1:] }} {% endmacro %} {% block header %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"
    type="text/javascript"></script>
<script src="{{url_for('static', filename='bootstrap3-typeahead.js')}}"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();

        if ("{{toastMessage|safe}}" != "") {
            vt.success('{{toastMessage|safe}}', { position: 'top-right' });
        }
    });
</script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="{{url_for('static', filename='bootstrap-tagsinput.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-tagsinput.css') }}">

<script src="{{url_for('static', filename='cities.json')}}"></script>
<script src="{{ url_for('static', filename='newProject.js') }}"></script>

<style>
    #circle {
        bottom: 60px !important;
    }
</style>

{% endblock header %}
{% block content %}

<article class="d-flex" style="margin-left: 15px;">
    <div class="row" style="margin-bottom: 15px;">
        <a class="d-flex align-items-center" href="{{ url_for('project_bp.project',project_name=project.slug) }}">
            <img src="{{ url_for('static', filename='icons/project_back.svg') }}">
            <b class="no-margin-bottom" style="color: white; font-size: 34px;">
                {{ project.title }}</b>
        </a>
    </div>
</article>

<form id="createProjectForm" action="{{ url_for('project_bp.project_update', project_id=project.id) }}" method="POST"
    style="all: unset;" onsubmit="return validateProjectForm();">

    <!-- FORM MISSION TITLE -->
    <div class="content-section" style="padding: 25px;">
        <div class="row-gap d-flex align-items-center" style="margin-bottom: 15px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill=white class="bi bi-bullseye"
                viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                <path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
            </svg>
            <h3 class="no-margin-bottom" style="font-weight: 600;">Name</h3>
        </div>
        <h4 style="font-weight: 400; margin-bottom: 15px;">What's the name of your project?
        </h4>
        <input class="form-control" style="height: 56px;" placeholder="Enter project mission" name="title"
            value="{{project.title}}" id="form_mission_title">
        <div style="display: none;" id="form_mission_title_ve">
            <div class="d-flex align-items-center"
                style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                <div class="d-flex align-items-center" style="column-gap: 10px;">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 30px;" width="14" height="14" fill="#ff3464"
                        class="bi bi-pencil-fill" viewBox="0 0 16 16">
                        <path
                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                    </svg>
                    <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project mission title
                        that has between 2 to 50 characters.</h6>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center"
            style="background-color: #ffffff10; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
            <h6 class="no-margin-bottom" id="form_mission_title_characters">E.g: Crowd.Inc</h6>
        </div>
    </div>
    <!-- FORM DESCRIPTION -->
    <div class="content-section" style="padding: 25px;">
        <div class="row-gap d-flex align-items-center" style="margin-bottom: 15px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill=white class="bi bi-justify-left"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" />
            </svg>
            <h3 class="no-margin-bottom" style="font-weight: 600;">Description</h3>
        </div>
        <h4 style="font-weight: 400; margin-bottom: 15px;">Describe your project in under 300 characters.</h4>
        <textarea class="form-control" style="height: 120px;" placeholder="Type in project description" name="description"
            id="form_description">{{project.description}}</textarea>
        <div style="display: none;" id="form_description_ve">
            <div class="d-flex align-items-center"
                style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                <div class="d-flex align-items-center" style="column-gap: 10px;">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 30px;" width="14" height="14" fill="#ff3464"
                        class="bi bi-pencil-fill" viewBox="0 0 16 16">
                        <path
                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                    </svg>
                    <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project description that
                        has between 40 to 400 characters.</h6>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center"
            style="background-color: #ffffff10; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
            <h6 class="no-margin-bottom" id="form_description_characters">Try to keep it short and interesting</h6>
        </div>
    </div>
    <div style="display: none;" id="form_description_ve">
        <div class="d-flex align-items-center"
            style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
            <div class="row-gap d-flex align-items-center" style="column-gap: 10px;">
                <svg xmlns="http://www.w3.org/2000/svg" style="width: 30px;" width="14" height="14" fill="#ff3464" class="bi bi-pencil-fill"
                    viewBox="0 0 16 16">
                    <path
                        d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                </svg>
                <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project description that
                    has between 40 to 400 characters.</h6>
            </div>
        </div>
    </div>

    <!-- FORM LINK -->
    <div class="content-section" style="padding: 25px;">
        <div class="row-gap d-flex align-items-center" style="margin-bottom: 15px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-link-45deg"
                viewBox="0 0 16 16">
                <path
                    d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                <path
                    d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
            </svg>
            <h3 class="no-margin-bottom" style="font-weight: 600;">Project Link</h3>
        </div>
        <h4 style="font-weight: 400; margin-bottom: 15px;">Share a link to your project</h4>
        <input class="form-control" style="height: 56px; padding-right: 30px;" placeholder="https://example.com"
            name="link" id="form_mission_title">
        <div style="display: none;" id="form_description_ve">
            <div class="d-flex align-items-center"
                style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
                <div class="row-gap d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#ff3464"
                        class="bi bi-pencil-fill" viewBox="0 0 16 16">
                        <path
                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                    </svg>
                    <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project description that
                        has between 40 to 300 characters.</h6>
                </div>
            </div>
        </div>
    </div>

    <!-- FORM LOCATION -->
    <div class="content-section" style="padding: 25px;">
        <div class="row-gap d-flex align-items-center" style="margin-bottom: 15px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill=white class="bi bi-geo-alt-fill"
                viewBox="0 0 16 16">
                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
            </svg>
            <h3 class="no-margin-bottom" style="font-weight: 600;">Location</h3>
        </div>
        <h4 style="font-weight: 400; margin-bottom: 15px;">Tell us the location of this project. Leave
            empty if global / virtual.</h4>

        <input class="form-control" style="height: 56px; width: 100%;" placeholder="Project Location"
            value="{{project.location}}" name="location" id="form_location">

        <div style="display: none;" id="form_location_ve">
            <div class="d-flex align-items-center"
                style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 10px; height: auto;">
                <div class="d-flex align-items-center" style="column-gap: 10px;">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 30px;" width="14" height="14" fill="#ff3464"
                        class="bi bi-pencil-fill" viewBox="0 0 16 16">
                        <path
                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                    </svg>
                    <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter a project location that
                        has less than 60 characters.</h6>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center"
            style="background-color: #ffffff10; padding: 10px 12px; border-radius: 8px; margin-top: 15px; height: auto;">
            <h6 class="no-margin-bottom">E.g: London, UK</h6>
        </div>
    </div>
    <style>
        .bootstrap-tagsinput {
            flex-wrap: wrap;
            height: unset;
        }
    </style>
    <!-- FORM CATEGORY -->
    <div class="content-section" style="padding: 25px;">
        <div class="d-flex align-items-center" style="margin-bottom: 15px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill=white class="bi bi-people-fill"
                viewBox="0 0 16 16">
                <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                <path fill-rule="evenodd"
                    d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z" />
                <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
            </svg>
            <h3 class="no-margin-bottom" style="font-weight: 600;">Category</h3>
        </div>
        <h4 style="font-weight: 400; margin-bottom: 15px;">
            What is your project category?
        </h4>
        <input class="form-control" placeholder="project category" name="target_user" id="form_target_users" value='{{tags}}'>
        <div style="display: none;" id="form_target_users_ve">
            <div class="d-flex align-items-center"
                style="background-color: white; padding: 10px 12px; border-radius: 8px; margin-top: 10px; height: auto;">
                <div class="d-flex align-items-center" style="column-gap: 10px;">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width: 30px;" width="14" height="14" fill="#ff3464"
                        class="bi bi-pencil-fill" viewBox="0 0 16 16">
                        <path
                            d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
                    </svg>
                    <h6 class="no-margin-bottom" style="color: #ff3464;">Please enter at least one target group
                        for this project.</h6>
                </div>
            </div>
        </div>
        <h6 id="tag_subtext" class="grey-text" style="margin-top: 15px;">
            E.g: app, movie, restaurant?
        </h6>
    </div>

    <input class="form-control save-changes-mobile sticky" type="submit" value="Save Changes" id="form_submit" style="font-weight: bold;">
</form>

<script src="{{url_for('static', filename='project.js')}}"></script>
{% endblock content %}