{% load pretty %}

{% load cache %}

{% cache 600 favourite_detail request.user.id object %}
  {% include 'mixins/partials/notify.html' %}

  {% if object is not None %}
    <h1 class="title">{{ object }}</h1>
    <p class="subtitle"><strong>{{ object.drug_class }}</strong></p>
    <div class="block">
      <a class="button is-info" href="#">Prices</a>
      <a class="button is-info" href="#">More info</a>
    </div>
    <div class="grid">
      <div class="cell">
        <div class="box">
          <h2 class="subtitle">Dosage</h2>
            <table
            class="table is-fullwidth is-hoverable"
            hx-target="#{{ context_object_name }}-table"
            id="{{ context_object_name }}-table"
            hx-swap="outerHTML"
            hx-trigger="{{ context_object_name_singular }}Event from:body"
            hx-get="#">
            <tbody>
                {% for item in object.dosages.all %}

                  <tr>
                    <th>roa</th>
                    <td>
                      {{ item.roa }}
                    </td>
                  </tr>

                  <tr>
                    <th>unit</th>
                    <td>
                      {{ item.unit }}
                    </td>
                  </tr>

                  <tr>
                    <th>threshold</th>
                    <td>
                      {{ item.threshold_lower }} - {{ item.threshold_upper }}
                    </td>
                  </tr>

                  <tr>
                    <th>light</th>
                    <td>
                      {{ item.light_lower }} - {{ item.light_upper }}
                    </td>
                  </tr>

                  <tr>
                    <th>common</th>
                    <td>
                      {{ item.common_lower }} - {{ item.common_upper }}
                    </td>
                  <tr>

                  <tr>
                    <th>strong</th>
                    <td>
                      {{ item.strong_lower }} - {{ item.strong_upper }}
                    </td>
                  <tr>

                  <tr>
                    <th>heavy</th>
                    <td>
                      {{ item.heavy_lower }} - {{ item.heavy_upper }}
                    </td>
                  </tr>
                {% endfor %}
            </tbody>
        
          </table>
        </div>

        <div class="box">
          <h2 class="subtitle">Timing</h2>
          <table
          class="table is-fullwidth is-hoverable"
          hx-target="#{{ context_object_name }}-table"
          id="{{ context_object_name }}-table"
          hx-swap="outerHTML"
          hx-trigger="{{ context_object_name_singular }}Event from:body"
          hx-get="#">
          <tbody>
              {% for item in object.timings.all %}

                <tr>
                  <th>roa</th>
                  <td>
                    {{ item.roa }}
                  </td>
                </tr>

                <tr>
                  <th>unit</th>
                  <td>
                    {{ item.unit }}
                  </td>
                </tr>

                <tr>
                  <th>onset</th>
                  <td>
                    {{ item.onset_lower }} - {{ item.onset_upper }}
                  </td>
                </tr>

                <tr>
                  <th>comeup</th>
                  <td>
                    {{ item.comeup_lower }} - {{ item.comeup_upper }}
                  </td>
                </tr>

                <tr>
                  <th>peak</th>
                  <td>
                    {{ item.peak_lower }} - {{ item.peak_upper }}
                  </td>
                <tr>

                <tr>
                  <th>offset</th>
                  <td>
                    {{ item.offset_lower }} - {{ item.offset_upper }}
                  </td>
                <tr>

                <tr>
                  <th>total</th>
                  <td>
                    {{ item.total_lower }} - {{ item.total_upper }}
                  </td>
                </tr>
              {% endfor %}
          </tbody>
        </table>
        </div>

        <div class="box">
          <h2 class="subtitle">Links</h2>
          <table
          class="table is-fullwidth is-hoverable"
          hx-target="#{{ context_object_name }}-table"
          id="{{ context_object_name }}-table"
          hx-swap="outerHTML"
          hx-trigger="{{ context_object_name_singular }}Event from:body"
          hx-get="#">
          <tbody>
              {% for item in object.links.all %}

                <tr>
                  <th>source</th>
                  <td>
                    {{ item.source }}
                  </td>
                </tr>

                <tr>
                  <th>url</th>
                  <td>
                    <a href="{{ item.url }}">{{ item.url }}</a>
                  </td>
                </tr>

                <tr>
                  <th>author</th>
                  <td>
                    {{ item.author }}
                  </td>
                </tr>

              {% endfor %}
          </tbody>
        </table>
        </div>

      </div>
      <div class="cell">
        <div class="box">
          <h2 class="subtitle">Actions</h2>
          <ul>
            {% for action in object.actions.all %}
              <li>{{ action }}</li>
            {% endfor %}
          </ul>
        </div>

        <div class="box">
          <h2 class="subtitle">Effects</h2>
          <table
          class="table is-fullwidth is-hoverable"
          hx-target="#{{ context_object_name }}-table"
          id="{{ context_object_name }}-table"
          hx-swap="outerHTML"
          hx-trigger="{{ context_object_name_singular }}Event from:body"
          hx-get="#">
          <tbody>
              {% for item in object.effects.all %}

                <tr>
                  <th>entry</th>
                  <td>
                    <a href="{{ item.entry.url }}">{{ item.entry.url }}</a>
                  </td>
                </tr>

                <tr>
                  <th>SEI</th>
                  <td>
                    <div class="grid">
                    {% for effect in item.subjective_effects.all %}
                    <div class="cell box">
                      {{ effect }}
                    </div>
                    {% endfor %}
                    </div>
                  </td>
                </tr>

              {% endfor %}
          </tbody>
        </table>
        </div>


      </div>
    </div>
    <div class="box">
      <h2 class="subtitle">Experiences</h2>
      <ul>
        {% for exp in object.experiences.all %}
          <li>{{ exp }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endcache %}