{% extends 'base.html' %}
{% load static %}

{% block style %} 
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<link rel="stylesheet" href="{% static 'css/annotations.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="icon" href="{% static 'image/favicon.ico' %}">
{% endblock %}

{% block body %}

	{% if not doc_html %}
        <div class='container-fluid'>
            <form method='POST' class='textbox'>
              {% csrf_token %}
              <div class="form-group">

                <label for="exampleFormControlTextarea1">Enter some text and click Annotate</label>
                <textarea class="form-control" name="text" rows="15"></textarea>
              </div>
              <button type="submit" class="btn btn-primary">Annotate</button>
            <br />
            <br />
            <br />
            <br />
            <h5> Sample text </h5>
            <pre>
Description: Intracerebral hemorrhage (very acute clinical changes occurred immediately).
CC: Left hand numbness on presentation; then developed lethargy later that day.

HX: On the day of presentation, this 72 y/o RHM suddenly developed generalized weakness and lightheadedness, and could not rise from a chair. Four hours later he experienced sudden left hand numbness lasting two hours. There were no other associated symptoms except for the generalized weakness and lightheadedness. He denied vertigo.

He had been experiencing falling spells without associated LOC up to several times a month for the past year.

MEDS: procardia SR, Lasix, Ecotrin, KCL, Digoxin, Colace, Coumadin.

PMH: 1)8/92 evaluation for presyncope (Echocardiogram showed: AV fibrosis/calcification, AV stenosis/insufficiency, MV stenosis with annular calcification and regurgitation, moderate TR, Decreased LV systolic function, severe LAE. MRI brain: focal areas of increased T2 signal in the left cerebellum and in the brainstem probably representing microvascular ischemic disease. IVG (MUGA scan)revealed: global hypokinesis of the LV and biventricular dysfunction, RV ejection Fx 45% and LV ejection Fx 39%. He was subsequently placed on coumadin severe valvular heart disease), 2)HTN, 3)Rheumatic fever and heart disease, 4)COPD, 5)ETOH abuse, 6)colonic polyps, 7)CAD, 8)CHF, 9)Appendectomy, 10)Junctional tachycardia.
            </pre>
            <br />
            <br />
            <h5> Please note this is a limited version of MedCAT and it is not trained or validated by clinicans.</h5>
            </form>
            <div id="train-annotations" style="display: none" />
        </div>
	{% else %}
        <div class='container-fluid train-annotations' id='train-annotations'>
            <h6 v-show="elementVisible" class="posfed" v-text='msg'></h6>

            <div class="row">
                <div class='col-8 annotations'>
                    {{ doc_html|safe }}
                </div>
                <div class='col-4 concept-info' id='info'>
                    <div id='cinfo' v-if="!show && selected_concept">
                        <h5> [[selected_concept.pretty_name]] </h5>
                        <table class="table table-hover info">
                            <tbody v-for="(value, name) in selected_concept">
                                <tr>
                                    <td>
                                        [[name]]
                                    </td>
                                    <td> 
                                        [[value]]
                                    </td>
                                </tr>
                        </table>
                    </div>
                    <div id='ccreate' v-if="show">
                        <h5> Create a new Concept </h5>
                        <table class="table table-hover info">
                            <tbody>
                                <tr>
                                    <td class='first'>
                                        Name
                                    </td>
                                    <td class='second'> 
                                        <input class='w100' ref='cntx_name' name='name'></input>
                                    </td>
                                </tr>
                                <tr>
                                    <td class='first'>
                                        CUI
                                    </td>
                                    <td class='second'> 
                                        <input class='w100' ref='cui' name='cui'></input>
                                    </td>
                                </tr>
                                 <tr>
                                    <td class='first'>
                                        TUI
                                    </td>
                                    <td class='second'> 
                                        <input class='w100' ref='tui' name='tui'></input>
                                    </td>
                                </tr>
                                  <tr>
                                    <td class='first'>
                                        Source Value 
                                    </td>
                                    <td class='second'> 
                                        <input class='w100' ref='source_value' name='source_value'></input>
                                    </td>
                                </tr>
                                  <tr>
                                    <td class='first'>
                                        Synonyms
                                    </td>
                                    <td class='second'> 
                                        <input class='w100' ref='synonyms' name='synonyms'></input>
                                    </td>
                                </tr>
 
                                 </tr>
                                  <tr>
                                    <td class='first'>
                                        Context 
                                    </td>
                                    <td class='second'> 
                                        <textarea class='w100' ref="cntx_text" name="text" rows="6"></textarea>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
<!-- external js -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script type="text/javascript">
    function getData() {
        let doc_json = {{doc_json | safe}};
        return doc_json;
    };
</script>
<script src="{% static 'js/anns.js' %}"></script>
{% endblock %}
