{% extends 'layouts/members.twig' %}

{% block members_content %}

    {% include 'includes/elements/intro_block.twig' with {
        intro_title: 'Health profile',
        intro_content: false,
        class: 'membersIntro',
        use_h1: true
    }%}



    <div class="membersContentWrap js_meds" data-all-medications="{{ all_medications }}" data-all-medical-conditions="{{ all_medical_conditions }}">

        <div class="membersAlerts">

            {% if success is not empty %}
                {{ success.message|raw }}
            {% endif %}

            {% if errors is not empty %}
                <div class="error">
                    <ul>
                        {% for error in errors %}
                            <li>
                                {{error}}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

        </div> <!-- .membersAlerts -->

        <div class="healthProfileWrap">

            <form class="memberContactDetails js_memberContactDetails"
                  action="{{ route('members-health-profile-store', [], false) }}"
                  method="POST"
                  enctype="multipart/form-data"
            >

                <div class="row">

                    <fieldset class="memberEditAddress">

                        <div class="healthProfileFieldWrap">

                            <div class="row">

                                <label for="medications">Medications</label>

                                <mtc-tag-input
                                        tags-string="{{ member.getMedicationsString() }}"
                                        input-placeholder="Enter medication"
                                        input-name="medications"
                                        :autocomplete-items="{{ all_medications }}"
                                ></mtc-tag-input>


                            </div>

                            <div class="row">
                                <label for="allergies">Allergies</label>

                                <mtc-tag-input
                                        tags-string="{{ member.getAllergiesString() }}"
                                        input-placeholder="Enter allergy"
                                        input-name="allergies"
                                ></mtc-tag-input>

                            </div>

                            <div class="row">
                                <label for="conditions">Medical Conditions</label>

                                <mtc-tag-input
                                        tags-string="{{ member.getConditionsString() }}"
                                        input-placeholder="Enter condition"
                                        input-name="conditions"
                                        :autocomplete-items="{{ all_medical_conditions }}"
                                ></mtc-tag-input>

                            </div>

                        </div> <!-- .healthProfileFieldWrap -->


                        <div class="doctorMembersSection">

                            <h3>Doctor Surgery</h3>

                            <div class="gpSearchWrap row">

                                <label>Your doctor surgery</label>

                                <gp-surgery-search
                                        search-url="/shop/ajax/doctor_surgery_search.php"
                                        search-placeholder="Search doctor surgery name or address"
                                        :user-surgery="{{ doctor_surgery|json_encode }}"
                                ></gp-surgery-search>
                                
                            </div>

                        </div> <!-- .doctorMembersSection -->

                    </fieldset>

                </div>

                <div class="actionButtons">

                    <input type="hidden" name="action" value="update" />

                    <div class="actionsRight">
                        <button type="submit" name="submit['submit_health_profile']" class="button buttonAlt">Save Changes</button>
                    </div> <!-- .actionsRight -->

                </div> <!-- .actionButtons -->

            </form>

        </div> <!-- .healthProfileWrap -->


    </div> <!-- .membersContentGrid -->

{% endblock %}
