{% extends "layout-split.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>

<div class="row" style="margin-bottom: 35px; align-items: center;">
    <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>
    <a class="form-control delete-project" data-toggle="modal" data-target="#deleteModal">Delete Project</a>
</div>

{% endblock header %}

{% block left %}

<!-- Delete Project Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title black-text" id="deleteModalLabel">Delete Mission?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <h4 class="black-text" style="margin: 30px;">
                Are you sure you would like to delete this project?
            </h4>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form action="{{ url_for('project_bp.delete_project', project_id=project.id) }}" method="POST">
                    <input class="btn btn-danger mt-3" type="submit" value="Delete">
                </form>
            </div>

        </div>
    </div>
</div>

<!-- Sure Modal -->
<form id="createProjectForm" action="{{ url_for('project_bp.project_update', project_id=project.id) }}"
    method="POST" onsubmit="return validateProjectForm()">

    <div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="sureModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title black-text" id="sureModallLabel">Aru you sure?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <h4 class="black-text" style="margin: 30px;">
                    Are you sure you would like to edit this project?
                </h4>

                <div class="modal-footer">
                    <button style="background-color: red;" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                    <input class="form-control" style="background-color: #28A745; color: white;" type="submit" value="Save Changes" id="form_submit">
                </div>
            </div>
        </div>
    </div>

    <!-- FORM PROJECT NAME -->
    <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 your project called?
        </h4>
        <input class="form-control" style="height: 56px;" placeholder="Enter project Name" 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="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 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="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 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">
                <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 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" value="{{project.link}}">
        <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="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 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>

    <!-- FORM CATEGORY -->
    <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-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="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 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>

    <a class="form-control save-changes sticky" data-toggle="modal" data-target="#sureModal"
        style="height: 50px; display: flex; align-items: center; justify-content: center;">Save Changes</a>
</form>

{% endblock left %}

{% block right %}
<script>
    //sureModal
    $('#form_submit').click(function (e) {
        $('#sureModal').modal('toggle');
    });
</script>

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