1 files changed, 60 insertions, 0 deletions
diff --git a/uploader/templates/phenotypes/macro-display-resumable-elements.html b/uploader/templates/phenotypes/macro-display-resumable-elements.html
new file mode 100644
index 0000000..b0bf1b5
--- /dev/null
+++ b/uploader/templates/phenotypes/macro-display-resumable-elements.html
@@ -0,0 +1,60 @@
+{%macro display_resumable_elements(id, title, help)%}
+<div id="{{id}}"
+     class="resumable-elements hidden"
+     style="background:#D4D4EE;border-radius: 5px;;padding: 1em;border-left: solid #B2B2CC 1px;border-bottom: solid #B2B2CC 2px;margin-top:0.3em;">
+  <strong style="line-height: 1.2em;">{{title | title}}</strong>
+
+  <span class="form-text text-muted">{{help | safe}}</span>
+
+  <div id="{{id}}-selected-files"
+       class="resumable-selected-files"
+       style="display:flex;flex-direction:row;flex-wrap: wrap;justify-content:space-around;gap:10px 20px;">
+    <div class="panel panel-info file-display-template hidden">
+      <div class="panel-heading filename">The Filename Goes Here!</div>
+      <div class="panel-body">
+        <ul>
+          <li>
+            <strong>Name</strong>:
+            <span class="filename">the file's name</span></li>
+
+          <li><strong>Size</strong>: <span class="filesize">0 MB</span></li>
+
+          <li>
+            <strong>Unique Identifier</strong>:
+            <span class="fileuniqueid">brrr</span></li>
+
+          <li>
+            <strong>Mime</strong>:
+            <span class="filemimetype">text/csv</span></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <a id="{{id}}-browse-button"
+     class="resumable-browse-button btn btn-info"
+     href="#"
+     style="margin-left: 80%;">Browse</a>
+
+  <div id="{{id}}-progress-bar" class="progress hidden">
+    <div class="progress-bar"
+         role="progress-bar"
+         aria-valuenow="60"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         style="width: 0%;">
+      Uploading: 60%
+    </div>
+  </div>
+
+  <div id="{{id}}-cancel-resume-buttons">
+    <a id="{{id}}-resume-button"
+       class="resumable-resume-button btn btn-info hidden"
+       href="#">resume upload</a>
+
+    <a id="{{id}}-cancel-button"
+       class="resumable-cancel-button btn btn-danger hidden"
+       href="#">cancel upload</a>
+  </div>
+</div>
+{%endmacro%}