<div class="assessmentWrapper">

    <div class="table-style-1">
        <table width="100%" class="manage-items">
            <tr class="row_heading">
                <th style="text-align:left;">Name</th>
                <th>Strength</th>
                <th>Quantity</th>
            </tr>
            <tbody class="tabular">
            <tr>
                <td>{{ order_item.quantity}}x &nbsp; {{ order_item.item_name }}</td>
                <td>{{ order_item.item_size.strength }}</td>
                <td colspan="2">{{ order_item.item_size.quantity }}</td>
            </tr>
            <tr>
                <td>Pharmacy Label Text</td>
                <td colspan="3">
                    <div class="row textButton">
                        <input type="text"
                               id="js_pharmacyLabelText"
                               data-id="{{ order_item.id }}"
                               value="{{ order_item.pharmacy_label_text }}">
                        <button type="button"
                                id="js_updatePharmacyLabelText"
                                class="btn">
                            Save
                        </button>
                    </div> <!-- .row -->
                </td>
            </tr>

            {{ assessment_html|raw }}
            </tbody>
        </table>
    </div>

    {% if weight_verification %}
        <div class="weightVerificationReview">
            <h3>
                Weight verification
                <span class="orderItemStatus">{{ weight_verification.status_label }}</span>
            </h3>

            {% if weight_verification.is_submitted and weight_verification.front_url %}
                <p>Submitted: {{ weight_verification.submitted_at|date('d/m/Y H:i') }}</p>
                <div class="weightVerificationReview__photos">
                    <a href="{{ weight_verification.front_url }}" target="_blank" rel="noopener">
                        <img src="{{ weight_verification.front_url }}" alt="Front photo">
                        <span>Front</span>
                    </a>
                    <a href="{{ weight_verification.side_url }}" target="_blank" rel="noopener">
                        <img src="{{ weight_verification.side_url }}" alt="Side photo">
                        <span>Side</span>
                    </a>
                </div>
                <button type="button"
                        class="btn btn-grey js_requestNewPhotos"
                        data-order-id="{{ weight_verification.order_id }}"
                >
                    Request new photos
                </button>
            {% else %}
                <p class="error">
                    The patient has not submitted their weight verification photos yet.
                    This item cannot be approved until they do.
                </p>
            {% endif %}
        </div>
    {% endif %}

    <div class="row ">

        <span class="orderItemStatus {{ order_item.approval_status }}"
              id="orderItemStatus-{{ order_item.id }}"
        >
            {{ (order_item.approval_status)|capitalize }}
        </span>
        {% if
            can_clinically_check and
            item.product_type == 'doctor' and
            order_item.approved == '1'
        %}
            <button type="button"
                    data-order_id="{{ order_item.order_id }}"
                    data-order_item_id="{{ order_item.id }}"
                    data-action="clinic_check"
                    class="btn btn-green approveRejectOrderItem"
            >
                Clinically Checked
            </button>
        {% else %}
            {% if weight_verification and not weight_verification.is_submitted %}
                <button type="button"
                        class="btn btn-green"
                        disabled
                        title="Awaiting weight verification photos"
                >
                    Approve
                </button>
            {% else %}
                <button type="button"
                        data-order_id="{{ order_item.order_id }}"
                        data-order_item_id="{{ order_item.id }}"
                        data-action="approve"
                        class="btn btn-green approveRejectOrderItem"
                >
                    Approve
                </button>
            {% endif %}
            <button type="button"
                    data-order_id="{{ order_item.order_id }}"
                    data-order_item_id="{{ order_item.id }}"
                    data-action="reject"
                    class="btn btn-red approveRejectOrderItem"
            >
                Reject
            </button>
            <a type="button"
               class="btn"
               target="_blank"
               href="/plugins/MembersMessaging/admin/view_member_thread.php?act=request_info&order_id={{ order_item.order_id }}"
            >
                Request Information
            </a>

        {% endif %}
        <button type="button"
                data-order_id="{{ order_item.order_id }}"
                data-order_item_id="{{ order_item.id }}"
                data-action="skip"
                class="btn btn-grey approveRejectOrderItem"
        >
            Skip
        </button>
    </div>
    <div class="row checkboxRow clear">
        <input id="showNote"
               name=""
               value="1"
               type="checkbox"
               class="js_showNote"
               checked
        />
        <label>Leave a note?</label>
    </div>
    <form  class="js_reviewNoteForm">
        <div class="row">
            <div class="row">
                <label>Note</label>
                <textarea name="reviewNote" placeholder="Doctor Note" class="js_reviewNote"></textarea>
            </div>
            <div class="row">

                <button type="button"
                        class="btn js_saveReviewNote"
                        data-order-id="{{ order_item.order_id }}"
                        data-order-item-id="{{ order_item.id }}"
                >
                    Save Note
                </button>
            </div>
        </div>
    </form>

    <form  id="gpTemplateSelection" class="hideme">
        <div class="row">
            <div class="row">
                <label for="reviewNote">GP email</label>
                <input type="email"
                       name="gp_email"
                       id="gpEmail"
                       placeholder="GP Email"/>
            </div>
            <div class="row">
                <label for="reviewNote">Email Subject</label>
                <input type="text"
                       name="gp_subject"
                       id="gpSubject"
                       placeholder="Email Subject"/>
            </div>
            <div class="row">
                <label for="reviewNoteTemplate">Template</label>
                <select id="gpTemplate" id="reviewNoteTemplate">
                    <option value="">Choose Template</option>
                    {% for template in gp_templates %}
                        <option value="{{ template.text }}">{{ template.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="row">
                <label for="gpNote">Note</label>
                <textarea name="gp_note" id="gpNote" placeholder="Message to GP"></textarea>
            </div>
            <div class="row">
                <button type="button"
                        class="btn"
                        id="saveGPEmail">
                    Save And Review Next
                </button>
            </div>
        </div>
    </form>

</div> <!-- .assessmentWrapper -->
