Sheet find: use tabs and pills

4 files changed, 351 insertions, 265 deletions

diff --git a/archaeological_finds/templates/ishtar/sheet_basefind.html b/archaeological_finds/templates/ishtar/sheet_basefind.html
index c20ca66ee..7ea16fecb 100644
--- a/archaeological_finds/templates/ishtar/sheet_basefind.html
+++ b/archaeological_finds/templates/ishtar/sheet_basefind.html
@@ -1,6 +1,10 @@
 {% load i18n window_field from_dict link_to_window window_tables window_header humanize %}
-    <p class='window-refs text-center'>{{base_find.complete_id }}</p>
-    <p class='window-refs text-center'>{{base_find.short_id }}</p>
+<div id="{{window_id}}-base-find-{{forloop.counter}}" role="tabpanel"
+     class="tab-pane fade{% if forloop.first %} show active{% endif %}">
+    <p class='window-refs text-center'>{{ base_find.complete_id }}</p>
+    {% if base_find.complete_id != base_find.short_id %}
+        <p class='window-refs text-center'>{{ base_find.short_id }}</p>
+    {% endif %}
     {% if base_find.external_id %}
     <p class='window-refs text-center external-id'>
         <small title="{% trans 'Internal ID' %}">
@@ -77,11 +81,5 @@
         {% endwith %}{% endwith %}
         {% endif %}
     </div>
-
-{% if first %}
-  </div>
 </div>
-<div class="subsection">
-{% endif %}
 
-{% if forloop.counter0 %}<hr/>{% endif %}
diff --git a/archaeological_finds/templates/ishtar/sheet_find.html b/archaeological_finds/templates/ishtar/sheet_find.html
index a3ad9fca5..4d6fe568c 100644
--- a/archaeological_finds/templates/ishtar/sheet_find.html
+++ b/archaeological_finds/templates/ishtar/sheet_find.html
@@ -15,276 +15,357 @@
 </div>
 {% endif %}
 
+<ul class="nav nav-tabs" id="{{window_id}}-tabs" role="tablist">
+    <li class="nav-item">
+        <a class="nav-link active" id="{{window_id}}-basefind-tab"
+           data-toggle="tab" href="#{{window_id}}-basefind" role="tab"
+           aria-controls="{{window_id}}-basefind" aria-selected="true">
+            {% trans "Image / Base find" %}
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" id="{{window_id}}-identification-tab"
+           data-toggle="tab" href="#{{window_id}}-identification" role="tab"
+           aria-controls="{{window_id}}-identification" aria-selected="false">
+            {% trans "Identification / Description / Dimensions" %}
+        </a>
+    </li>
+    {% if item.integrities.count or item.remarkabilities.count or item.conservatory_state or item.conservatory_comment or item.alterations.count or item.alteration_causes.count or item.preservation_to_considers.count or item.appraisal_date or item.treatment_emergency or item.insurance_value or item.estimated_value or item.datings.count or item.dating_comment %}
+    <li class="nav-item">
+        <a class="nav-link" id="{{window_id}}-preservation-tab"
+           data-toggle="tab" href="#{{window_id}}-preservation" role="tab"
+           aria-controls="{{window_id}}-preservation" aria-selected="false">
+            {% trans "Datings / Preservation" %}
+        </a>
+    </li>
+    {% endif %}
+    {% if item.container or item.upstream_treatment or item.downstream_treatment or item.treatments.count %}
+    <li class="nav-item">
+        <a class="nav-link" id="{{window_id}}-warehouse-tab"
+           data-toggle="tab" href="#{{window_id}}-warehouse" role="tab"
+           aria-controls="{{window_id}}-warehouse" aria-selected="false">
+            {% trans "Warehouse / Treatments" %}
+        </a>
+    </li>
+    {% endif %}
+    {% if item.documents.count %}
+    <li class="nav-item">
+        <a class="nav-link" id="{{window_id}}-documents-tab"
+           data-toggle="tab" href="#{{window_id}}-documents" role="tab"
+           aria-controls="{{window_id}}-treatments" aria-selected="false">
+            {% trans "Documents" %}
+        </a>
+    </li>
+    {% endif %}
+    <li class="nav-item">
+        <a class="nav-link" id="{{window_id}}-json-tab"
+           data-toggle="tab" href="#{{window_id}}-json" role="tab"
+           aria-controls="{{window_id}}-json" aria-selected="false">
+            {% trans "Custom fields" %}
+        </a>
+    </li>
+</ul>
 
-{% with nb_image=item.images.count %}
-{% if nb_image %}
-<div class="clearfix">
-    <div class="card float-left col-12 col-md-6 col-lg-4">
-        {% include "ishtar/blocks/window_image.html" %}
-        <div class="card-body">
-        </div>
-    </div>
-{% endif %}
+<div class="tab-content" id="{{window_id}}-tab-content">
 
-    <h2>{% trans "Associated base finds"%}</h2>
+  <div class="tab-pane fade show active" id="{{window_id}}-basefind"
+       role="tabpanel" aria-labelledby="{{window_id}}-basefind-tab">
+      {% with nb_image=item.images.count %}
+      {% if nb_image %}
+      <div class="clearfix">
+          <div class="card float-left col-12 col-md-6 col-lg-4">
+              {% include "ishtar/blocks/window_image.html" %}
+              <div class="card-body">
+              </div>
+          </div>
+          {% endif %}
 
-    <div class="subsection">
-        {% for base_find in item.base_finds.all %}
-        {% with first=forloop.first|add:nb_image %}
-        {% include "ishtar/sheet_basefind.html" %}
-        {% endwith %}
-        {% endfor %}
-    </div>
-{% endwith %}
+          <ul class="nav nav-pills" role="tablist">
+              {% for base_find in item.base_finds.all %}
+              <li class="nav-item">
+                  <a class="nav-link{% if forloop.first %} active{% endif %}"
+                     data-toggle="tab" href="#{{window_id}}-base-find-{{forloop.counter}}"
+                     role="tab">
+                      {{base_find.short_id}}
+                  </a>
+              </li>
+              {% endfor %}
+          </ul>
 
-<h3>{% trans "Identification" %}</h3>
+          <div class="tab-content">
+              {% for base_find in item.base_finds.all %}
+              {% with first=forloop.first|add:nb_image %}
+              {% include "ishtar/sheet_basefind.html" %}
+              {% endwith %}
+              {% endfor %}
+          </div>
+          {% if nb_image %}
+      </div>
+      {% endif %}
+      {% endwith %}
+  </div>
 
-<div class='text-center'>
-    {% include "ishtar/blocks/sheet_external_id.html" %}
-</div>
+  <div class="tab-pane fade" id="{{window_id}}-identification"
+       role="tabpanel" aria-labelledby="{{window_id}}-identification-tab">
+      <h3>{% trans "Identification" %}</h3>
 
-<div class='row'>
-    {% field_flex "Denomination" item.denomination %}
-    {% field_flex "Free ID" item.label %}
-    {% field_flex "Previous ID" item.previous_id %}
-    {% field_flex "Excavation ID" item.excavation_ids %}
-    {% field_flex "Museum ID" item.museum_id %}
-    {% field_flex "Seal number" item.seal_number %}
-    {% trans "Administrative index" as admin_index_label %}
-    {% field_flex admin_index_label item.administrative_index %}
-    {% field_flex_full "Mark" item.mark "<pre>" "</pre>" %}
-</div>
+      <div class='text-center'>
+          {% include "ishtar/blocks/sheet_external_id.html" %}
+      </div>
 
-<h3>{% trans "Description" %}</h3>
-<div class='row'>
-    {% field_flex_full "Description" item.description "<pre>" "</pre>" %}
-    {% field_flex "Is complete?" item.is_complete %}
-    {% field_flex_multiple "Material types" item.material_types %}
-    {% field_flex "Material type quality" item.material_type_quality %}
-    {% field_flex_multiple "Object types" item.object_types %}
-    {% field_flex "Object type quality" item.object_type_quality %}
-    {% field_flex "Find number" item.find_number %}
-    {% field_flex "Minimum number of individuals (MNI)" item.min_number_of_individuals %}
-    {% field_flex_full "Decoration" item.decoration "<pre>" "</pre>" %}
-    {% field_flex_full "Inscription" item.inscription "<pre>" "</pre>" %}
-    {% field_flex "Manufacturing place" item.manufacturing_place %}
-    {% field_flex_multiple "Communicability" item.communicabilities %}
-    {% field_flex_full "Comment" item.comment "<pre>" "</pre>" %}
-</div>
+      <div class='row'>
+          {% field_flex "Denomination" item.denomination %}
+          {% field_flex "Free ID" item.label %}
+          {% field_flex "Previous ID" item.previous_id %}
+          {% field_flex "Excavation ID" item.excavation_ids %}
+          {% field_flex "Museum ID" item.museum_id %}
+          {% field_flex "Seal number" item.seal_number %}
+          {% trans "Administrative index" as admin_index_label %}
+          {% field_flex admin_index_label item.administrative_index %}
+          {% field_flex_full "Mark" item.mark "<pre>" "</pre>" %}
+      </div>
 
-{% if item.length or item.width or item.height or item.diameter or item.thickness or item.volume or item.weight_string or item.dimensions_comment or item.clutter_long_side or item.clutter_short_side or item.clutter_height %}
-<h3>{% trans "Dimensions" %}</h3>
-<div class='row'>
-    {% field_flex "Length (cm)" item.length %}
-    {% field_flex "Width (cm)" item.width %}
-    {% field_flex "Height (cm)" item.height %}
-    {% field_flex "Diameter (cm)" item.diameter %}
-    {% field_flex "Thickness (cm)" item.thickness %}
-    {% field_flex "Volume (l)" item.volume %}
-    {% trans "Weight (g)" as weight_label %}
-    {% field_flex weight_label item.weight_string %}
-    {% field_flex "Clutter long side (cm)" item.clutter_long_side %}
-    {% field_flex "Clutter short side (cm)" item.clutter_short_side %}
-    {% field_flex "Clutter height (cm)" item.clutter_height %}
-    {% field_flex_full "Dimensions comment" item.dimensions_comment "<pre>" "</pre>" %}
-</div>
-{% endif %}
+      <h3>{% trans "Description" %}</h3>
+      <div class='row'>
+          {% field_flex_full "Description" item.description "<pre>" "</pre>" %}
+          {% field_flex "Is complete?" item.is_complete %}
+          {% field_flex_multiple "Material types" item.material_types %}
+          {% field_flex "Material type quality" item.material_type_quality %}
+          {% field_flex_multiple "Object types" item.object_types %}
+          {% field_flex "Object type quality" item.object_type_quality %}
+          {% field_flex "Find number" item.find_number %}
+          {% field_flex "Minimum number of individuals (MNI)" item.min_number_of_individuals %}
+          {% field_flex_full "Decoration" item.decoration "<pre>" "</pre>" %}
+          {% field_flex_full "Inscription" item.inscription "<pre>" "</pre>" %}
+          {% field_flex "Manufacturing place" item.manufacturing_place %}
+          {% field_flex_multiple "Communicability" item.communicabilities %}
+          {% field_flex_full "Comment" item.comment "<pre>" "</pre>" %}
+      </div>
 
-<h3>{% trans "Sheet" %}</h3>
-<div class='row'>
-    {% trans "Checked" as checked_label %}
-    {% field_flex checked_label item.checked_type %}
-    {% field_flex "Check date" item.check_date %}
-    {% include "ishtar/blocks/sheet_creation_section.html" %}
-</div>
+      {% if item.length or item.width or item.height or item.diameter or item.thickness or item.volume or item.weight_string or item.dimensions_comment or item.clutter_long_side or item.clutter_short_side or item.clutter_height %}
+      <h3>{% trans "Dimensions" %}</h3>
+      <div class='row'>
+          {% field_flex "Length (cm)" item.length %}
+          {% field_flex "Width (cm)" item.width %}
+          {% field_flex "Height (cm)" item.height %}
+          {% field_flex "Diameter (cm)" item.diameter %}
+          {% field_flex "Thickness (cm)" item.thickness %}
+          {% field_flex "Volume (l)" item.volume %}
+          {% trans "Weight (g)" as weight_label %}
+          {% field_flex weight_label item.weight_string %}
+          {% field_flex "Clutter long side (cm)" item.clutter_long_side %}
+          {% field_flex "Clutter short side (cm)" item.clutter_short_side %}
+          {% field_flex "Clutter height (cm)" item.clutter_height %}
+          {% field_flex_full "Dimensions comment" item.dimensions_comment "<pre>" "</pre>" %}
+      </div>
+      {% endif %}
 
-{% if item.integrities.count or item.remarkabilities.count or item.conservatory_state or item.conservatory_comment or item.alterations.count or item.alteration_causes.count or item.preservation_to_considers.count or item.appraisal_date or item.treatment_emergency or item.insurance_value or item.estimated_value %}
-<h3>{% trans "Preservation" %}</h3>
-<div class='row'>
-    {% field_flex_multiple "Integrity / interest" item.integrities %}
-    {% field_flex_multiple "Remarkability" item.remarkabilities %}
-    {% field_flex "Conservatory state" item.conservatory_state %}
-    {% field_flex_multiple "Alteration" item.alterations %}
-    {% field_flex_multiple "Alteration cause" item.alteration_causes %}
-    {% field_flex_multiple "Recommended treatments" item.preservation_to_considers %}
-    {% field_flex "Treatment emergency" item.treatment_emergency %}
-    {% field_flex "Estimated value" item.estimated_value|default_if_none:''|intcomma '' ' '|add:CURRENCY %}
-    {% field_flex "Insurance value" item.insurance_value|default_if_none:''|intcomma '' ' '|add:CURRENCY %}
-    {% field_flex "Appraisal date" item.appraisal_date %}
-    {% field_flex_full "Conservatory comment" item.conservatory_comment "<pre>" "</pre>" %}
-</div>
-{% endif %}
+      <h3>{% trans "Sheet" %}</h3>
+      <div class='row'>
+          {% trans "Checked" as checked_label %}
+          {% field_flex checked_label item.checked_type %}
+          {% field_flex "Check date" item.check_date %}
+          {% include "ishtar/blocks/sheet_creation_section.html" %}
+      </div>
+  </div>
+  <div class="tab-pane fade" id="{{window_id}}-preservation"
+       role="tabpanel" aria-labelledby="{{window_id}}-preservation-tab">
+      {% if item.integrities.count or item.remarkabilities.count or item.conservatory_state or item.conservatory_comment or item.alterations.count or item.alteration_causes.count or item.preservation_to_considers.count or item.appraisal_date or item.treatment_emergency or item.insurance_value or item.estimated_value %}
+      <h3>{% trans "Preservation" %}</h3>
+      <div class='row'>
+          {% field_flex_multiple "Integrity / interest" item.integrities %}
+          {% field_flex_multiple "Remarkability" item.remarkabilities %}
+          {% field_flex "Conservatory state" item.conservatory_state %}
+          {% field_flex_multiple "Alteration" item.alterations %}
+          {% field_flex_multiple "Alteration cause" item.alteration_causes %}
+          {% field_flex_multiple "Recommended treatments" item.preservation_to_considers %}
+          {% field_flex "Treatment emergency" item.treatment_emergency %}
+          {% field_flex "Estimated value" item.estimated_value|default_if_none:''|intcomma '' ' '|add:CURRENCY %}
+          {% field_flex "Insurance value" item.insurance_value|default_if_none:''|intcomma '' ' '|add:CURRENCY %}
+          {% field_flex "Appraisal date" item.appraisal_date %}
+          {% field_flex_full "Conservatory comment" item.conservatory_comment "<pre>" "</pre>" %}
+      </div>
+      {% endif %}
 
-{% if item.dating or item.dating_comment %}
-<h3>{% trans "Dating" %}</h3>
-{% if item.datings.count %}
-<table id='{{window_id}}-datings' class="table table-striped">
-    <tr>
-        <th>{% trans "Period" %}</th>
-        <th>{% trans "Start date" %}</th>
-        <th>{% trans "End date" %}</th>
-        <th>{% trans "Dating type" %}</th>
-        <th>{% trans "Quality" %}</th>
-        <th>{% trans "Precise dating" %}</th>
-    </tr>
-{% for dating in item.datings.all %}
-    <tr>
-        <td>
-            {{dating.period}}
-        </td>
-        <td>
-            {{dating.start_date|default_if_none:"-"}}
-        </td>
-        <td>
-            {{dating.end_date|default_if_none:"-"}}
-        </td>
-        <td>
-            {{dating.dating_type|default_if_none:"-"}}
-        </td>
-        <td>
-            {{dating.quality|default_if_none:"-"}}
-        </td>
-        <td>
-            {{dating.precise_dating|default_if_none:"-"}}
-        </td>
-    </tr>
-{% endfor %}
-</table>
-{% endif %}
-    {% field_flex_full "Comment on dating" item.dating_comment "<pre>" "</pre>" %}
-{% endif %}
+      {% if item.datings.count or item.dating_comment %}
+      <h3>{% trans "Dating" %}</h3>
+      {% if item.datings.count %}
+      <table id='{{window_id}}-datings' class="table table-striped">
+          <tr>
+              <th>{% trans "Period" %}</th>
+              <th>{% trans "Start date" %}</th>
+              <th>{% trans "End date" %}</th>
+              <th>{% trans "Dating type" %}</th>
+              <th>{% trans "Quality" %}</th>
+              <th>{% trans "Precise dating" %}</th>
+          </tr>
+          {% for dating in item.datings.all %}
+          <tr>
+              <td>
+                  {{dating.period}}
+              </td>
+              <td>
+                  {{dating.start_date|default_if_none:"-"}}
+              </td>
+              <td>
+                  {{dating.end_date|default_if_none:"-"}}
+              </td>
+              <td>
+                  {{dating.dating_type|default_if_none:"-"}}
+              </td>
+              <td>
+                  {{dating.quality|default_if_none:"-"}}
+              </td>
+              <td>
+                  {{dating.precise_dating|default_if_none:"-"}}
+              </td>
+          </tr>
+          {% endfor %}
+      </table>
+      {% endif %}
+      {% field_flex_full "Comment on dating" item.dating_comment "<pre>" "</pre>" %}
+      {% endif %}
+  </div>
+  <div class="tab-pane fade" id="{{window_id}}-warehouse"
+       role="tabpanel" aria-labelledby="{{window_id}}-warehouse-tab">
+      {% if item.container %}
+      <h3>{% trans "Warehouse"%}</h3>
+      <div class='row'>
+          {% field_flex_detail "Container" item.container %}
+          {% field_flex "Container ID" item.container.cached_location %}
+          {% field_flex_detail "Responsible warehouse" item.container.responsible %}
+          {% field_flex_detail "Location (warehouse)" item.container.location %}
+          {% field_flex "Precise localisation" item.container.cached_division %}
+      </div>
+      {% endif %}
+      {% if item.upstream_treatment or item.downstream_treatment or item.treatments.count %}
+      {% if item.treatments.all %}
+      <h3>{% trans "Treatments"%}</h3>
+      <table id='{{window_id}}-treatments' class="table table-striped">
+          <tr>
+              <th>&nbsp;</th>
+              <th>{% trans "Year - index" %}</th>
+              <th>{% trans "Label" %}</th>
+              <th>{% trans "Type" %}</th>
+              <th>{% trans "State" %}</th>
+              <th>{% trans "Related finds (max. 15 displayed)" %}</th>
+              <th>{% trans "Doer" %}</th>
+              <th>{% trans "Container" %}</th>
+              <th>{% trans "Start date" %}</th>
+              <th>{% trans "End date" %}</th>
+          </tr>
+          {% for treatment in item.treatments.all %}
+          <tr>
+              <td>
+                  <a class="display_details" href="#"
+                     onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
+                      <i class="fa fa-info-circle" aria-hidden="true"></i>
+                  </a>
+              </td>
+              <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
+              <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.treatment_types_lbl }}</td>
+              <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
+              <td class='item-list'>{% for it in treatment.limited_finds %}<span>{{it}} {{it|link_to_window}}</span>{% endfor %}</td>
+              <td class='string'>{{ treatment.person|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.start_date|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.end_date|default_if_none:"-" }}</td>
+          </tr>
+          {% endfor %}
+      </table>
+      {% endif %}
 
-{% include "ishtar/blocks/sheet_json.html" %}
+      {% if item.upstream_treatment %}
+      <h3>{% trans "Upstream treatment" %}</h3>
+      <table id='{{window_id}}-upstream' class="table table-striped">
+          <tr>
+              <th>&nbsp;</th>
+              <th>{% trans "Year - index" %}</th>
+              <th>{% trans "Label" %}</th>
+              <th>{% trans "Type" %}</th>
+              <th>{% trans "State" %}</th>
+              <th>{% trans "Related finds (max. 15 displayed)" %}</th>
+              <th>{% trans "Doer" %}</th>
+              <th>{% trans "Container" %}</th>
+              <th>{% trans "Start date" %}</th>
+              <th>{% trans "End date" %}</th>
+          </tr>
+          {% for items, treatment in item.limited_upstream_treatments %}
+          <tr>
+              <td>
+                  <a class="display_details" href="#"
+                     onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
+                      <i class="fa fa-info-circle" aria-hidden="true"></i>
+                  </a>
+              </td>
+              <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
+              <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.treatment_types_lbl }}</td>
+              <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
+              <td class='item-list'>{% for it in items %}<span>{{it}} {{it|link_to_window}}</span>{% endfor %}</td>
+              <td class='string'>{{ treatment.person|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.start_date|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.end_date|default_if_none:"-" }}</td>
+          </tr>
+          {% endfor %}
+      </table>
+      <p class='tool'><a class='badge' href="{% url 'get-upstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank" title='{% trans "Export as CSV"%}'>{% trans "CSV" %}</a> ({{ENCODING}})</p>
+      {% endif %}
 
-{% if item.container %}
-<h3>{% trans "Warehouse"%}</h3>
-<div class='row'>
-    {% field_flex_detail "Container" item.container %}
-    {% field_flex "Container ID" item.container.cached_location %}
-    {% field_flex_detail "Responsible warehouse" item.container.responsible %}
-    {% field_flex_detail "Location (warehouse)" item.container.location %}
-    {% field_flex "Precise localisation" item.container.cached_division %}
-</div>
-{% endif %}
+      {% if item.downstream_treatment %}
+      <h3>{% trans "Downstream treatment" %}</h3>
+      <table id='{{window_id}}-downstream' class="table table-striped">
+          <tr>
+              <th>&nbsp;</th>
+              <th>{% trans "Year - index" %}</th>
+              <th>{% trans "Label" %}</th>
+              <th>{% trans "Type" %}</th>
+              <th>{% trans "State" %}</th>
+              <th>{% trans "Related finds (max. 15 displayed)" %}</th>
+              <th>{% trans "Doer" %}</th>
+              <th>{% trans "Container" %}</th>
+              <th>{% trans "Start date" %}</th>
+              <th>{% trans "End date" %}</th>
+          </tr>
+          {% for items, treatment in item.limited_downstream_treatments %}
+          <tr>
+              <td>
+                  <a class="display_details" href="#"
+                     onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
+                      <i class="fa fa-info-circle" aria-hidden="true"></i>
+                  </a>
+              </td>
+              <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
+              <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.treatment_types_lbl }}</td>
+              <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
+              <td class='item-list'>{% for it in items %}<span>{{it}} {{ it|link_to_window}}</span>{% endfor %}</td>
+              <td class='string'>{{ treatment.person|default_if_none:"" }}</td>
+              <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
+              <td class='string'>{{ treatment.start_date|default_if_none:"" }}</td>
+              <td class='string'>{{ treatment.end_date|default_if_none:"" }}</td>
+          </tr>
+          {% endfor %}
+      </table>
 
-{% if item.upstream_treatment or item.downstream_treatment or item.treatments.count %}
-<h3>{% trans "Treatments"%}</h3>
-    <table id='{{window_id}}-treatments' class="table table-striped">
-        <tr>
-            <th>&nbsp;</th>
-            <th>{% trans "Year - index" %}</th>
-            <th>{% trans "Label" %}</th>
-            <th>{% trans "Type" %}</th>
-            <th>{% trans "State" %}</th>
-            <th>{% trans "Related finds (max. 15 displayed)" %}</th>
-            <th>{% trans "Doer" %}</th>
-            <th>{% trans "Container" %}</th>
-            <th>{% trans "Start date" %}</th>
-            <th>{% trans "End date" %}</th>
-        </tr>
-        {% for treatment in item.treatments.all %}
-        <tr>
-            <td>
-                <a class="display_details" href="#"
-                   onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
-                    <i class="fa fa-info-circle" aria-hidden="true"></i>
-                </a>
-            </td>
-            <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
-            <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
-            <td class='string'>{{ treatment.treatment_types_lbl }}</td>
-            <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
-            <td class='item-list'>{% for it in treatment.limited_finds %}<span>{{it}} {{it|link_to_window}}</span>{% endfor %}</td>
-            <td class='string'>{{ treatment.person|default_if_none:"-" }}</td>
-            <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
-            <td class='string'>{{ treatment.start_date|default_if_none:"-" }}</td>
-            <td class='string'>{{ treatment.end_date|default_if_none:"-" }}</td>
-        </tr>
-        {% endfor %}
-    </table>
-
-{% if item.upstream_treatment %}
-<h3>{% trans "Upstream treatment" %}</h3>
-<table id='{{window_id}}-upstream' class="table table-striped">
-  <tr>
-    <th>&nbsp;</th>
-    <th>{% trans "Year - index" %}</th>
-    <th>{% trans "Label" %}</th>
-    <th>{% trans "Type" %}</th>
-    <th>{% trans "State" %}</th>
-    <th>{% trans "Related finds (max. 15 displayed)" %}</th>
-    <th>{% trans "Doer" %}</th>
-    <th>{% trans "Container" %}</th>
-    <th>{% trans "Start date" %}</th>
-    <th>{% trans "End date" %}</th>
-  </tr>
-  {% for items, treatment in item.limited_upstream_treatments %}
-  <tr>
-    <td>
-      <a class="display_details" href="#"
-         onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
-        <i class="fa fa-info-circle" aria-hidden="true"></i>
-      </a>
-    </td>
-    <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
-    <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.treatment_types_lbl }}</td>
-    <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
-    <td class='item-list'>{% for it in items %}<span>{{it}} {{it|link_to_window}}</span>{% endfor %}</td>
-    <td class='string'>{{ treatment.person|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.start_date|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.end_date|default_if_none:"-" }}</td>
-  </tr>
-  {% endfor %}
-</table>
-<p class='tool'><a class='badge' href="{% url 'get-upstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank" title='{% trans "Export as CSV"%}'>{% trans "CSV" %}</a> ({{ENCODING}})</p>
-{% endif %}
-
-{% if item.downstream_treatment %}
-<h3>{% trans "Downstream treatment" %}</h3>
-<table id='{{window_id}}-downstream' class="table table-striped">
-  <tr>
-    <th>&nbsp;</th>
-    <th>{% trans "Year - index" %}</th>
-    <th>{% trans "Label" %}</th>
-    <th>{% trans "Type" %}</th>
-    <th>{% trans "State" %}</th>
-    <th>{% trans "Related finds (max. 15 displayed)" %}</th>
-    <th>{% trans "Doer" %}</th>
-    <th>{% trans "Container" %}</th>
-    <th>{% trans "Start date" %}</th>
-    <th>{% trans "End date" %}</th>
-  </tr>
-  {% for items, treatment in item.limited_downstream_treatments %}
-  <tr>
-    <td>
-      <a class="display_details" href="#"
-         onclick="load_window('{% url 'show-treatment' treatment.id %}/');">
-        <i class="fa fa-info-circle" aria-hidden="true"></i>
-      </a>
-    </td>
-    <td class='string'>{{ treatment.year }} - {{treatment.index}}</td>
-    <td class='string'>{{ treatment.label|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.treatment_types_lbl }}</td>
-    <td class='string'>{{ treatment.treatment_state|default_if_none:"-" }}</td>
-    <td class='item-list'>{% for it in items %}<span>{{it}} {{ it|link_to_window}}</span>{% endfor %}</td>
-    <td class='string'>{{ treatment.person|default_if_none:"" }}</td>
-    <td class='string'>{{ treatment.container|default_if_none:"-" }}</td>
-    <td class='string'>{{ treatment.start_date|default_if_none:"" }}</td>
-    <td class='string'>{{ treatment.end_date|default_if_none:"" }}</td>
-  </tr>
-  {% endfor %}
-</table>
-
-<p class='tool'><a class='badge' href="{% url 'get-downstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank">{% trans "CSV" %}</a> ({{ENCODING}})</p>
-{% endif %}
-
-{% endif %}
-
-{% trans "Associated documents" as finds_docs %}
-{% if item.documents.count %}
-{% dynamic_table_document finds_docs 'documents' 'finds' item.pk '' output %}
-{% endif %}
+      <p class='tool'><a class='badge' href="{% url 'get-downstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank">{% trans "CSV" %}</a> ({{ENCODING}})</p>
+      {% endif %}
+      {% endif %}
+  </div>
+  {% if item.documents.count %}
+  <div class="tab-pane fade" id="{{window_id}}-documents"
+       role="tabpanel" aria-labelledby="{{window_id}}-documents-tab">
+      {% trans "Associated documents" as finds_docs %}
+      {% dynamic_table_document finds_docs 'documents' 'finds' item.pk '' output %}
+  </div>
+  {% endif %}
+  <div class="tab-pane fade" id="{{window_id}}-json"
+       role="tabpanel" aria-labelledby="{{window_id}}-json-tab">
+      {% include "ishtar/blocks/sheet_json.html" %}
+  </div>
+</div>
 
 {% endblock %}
+
diff --git a/ishtar_common/templates/ishtar/blocks/sheet_json.html b/ishtar_common/templates/ishtar/blocks/sheet_json.html
index 8927eb057..df9340c6f 100644
--- a/ishtar_common/templates/ishtar/blocks/sheet_json.html
+++ b/ishtar_common/templates/ishtar/blocks/sheet_json.html
@@ -5,5 +5,7 @@
 {% if forloop.first %}<div class='row'>{% endif %}
     {% field_flex label value %}
 {% if forloop.last %}</div>{% endif %}
+{% empty %}
+{% trans "No data" %}
 {% endfor %}
 {% endfor %}
diff --git a/scss/custom.scss b/scss/custom.scss
index f0168d469..09074de0b 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -136,6 +136,11 @@ pre {
     background-color: white;
 }
 
+
+.tab-content{
+    padding-top: 1em;
+}
+
 .input-progress.form-control:focus,
 .input-progress{
     background-color: $gray-300;