<div data-w-tab="My Cases" class="tab-pane w-tab-pane w--tab-active">
<div class="tab-content-container">
<a href="#" class="back-to-previous w-inline-block">
<div class="back-to-previous-arrow w-embed"><svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M295 401L167 273c-9.4-9.4-9.4-24.6 0-33.9L295 111c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87L488 232c13.3 0 24 10.7 24 24s-10.7 24-24 24l-246.1 0 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0zM168 80L88 80c-22.1 0-40 17.9-40 40l0 272c0 22.1 17.9 40 40 40l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-48.6 0-88-39.4-88-88L0 120C0 71.4 39.4 32 88 32l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24z"></path></svg></div>
<div>Back to All Cases</div>
</a>
<div class="tab-heading-container-for-button">
<div class="case-title-description-container">
<h2>This is the Case Subject</h2>
<div class="case-description">This is where a long description will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="case-details-container">
<table>
<tr>
<td class="case-details-table-cell">
<div class="case-details-heading">Case:</div>
</td>
<td class="case-details-table-cell">
<div class="case-details-value">{Case Number}</div>
</td>
</tr>
<tr>
<td class="case-details-table-cell">
<div class="case-details-heading">Created:</div>
</td>
<td class="case-details-table-cell">
<div class="case-details-value"><span data-tippy-content="November 23 2023 @ 8:32am" class="datetime-ago">35 Days Ago</span> by John Doe</div>
</td>
</tr>
<tr>
<td class="case-details-table-cell">
<div class="case-details-heading">Last Updated:</div>
</td>
<td class="case-details-table-cell">
<div class="case-details-value"><span data-tippy-content="November 23 2023 @ 8:32am" class="datetime-ago">2 Hours Ago</span> by EveryAnswer Support</div>
</td>
</tr>
</table>
<a href="#" class="button danger secondary small w-inline-block">
<div>Cancel Case</div>
</a>
</div>
</div>
<div class="space-2rem"></div>
<div class="divider"></div>
<div class="case-activities-wrapper">
<!-- START Add Ticket Note -->
<div class="case-activity-container">
<div class="case-activity-header">
<h3 class="case-activity-heading">{User's First & Last Name}</h3><img alt="{User's First & Last Name}" src="{User's Avatar Image}" loading="lazy" class="case-activity-avatar">
</div>
<div class="case-activity-detail-panel">
<div class="w-form">
<form id="ticket-update" name="ticket-update" data-name="ticket-update" method="post">
<div class="form-field-container">
<div class="field-label-container">
<label for="add-update" class="field-label">Add Update</label>
<div class="required-star">*</div>
<div class="help-tooltip w-embed" data-tippy-content="Provide additional details, progress updates, or attach relevant files to this case.">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<textarea id="add-update" name="add-update" maxlength="5000" data-name="add-update" placeholder="Your update" class="form-field text-area w-input"></textarea>
<div class="text-area-under">
<div>639 / 5000</div>
<div class="button-wrapper-horizontal">
{Add Attachments Reusable Component}
<button class="button" data-wait="Please wait...">
<div>Save Update</div>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END Add Ticket Note -->
<!-- START Activity - Repeat for each activity, sort newest activity first(top) -->
<div class="case-activity-container">
<div class="case-activity-header">
<div class="case-activity-header-top">
<h3 class="case-activity-heading">{Note Creator - us, not customer it should say {appname Support}}</h3>
<!-- Tags to add
<div class="tag info">Latest Update</div> - Add to the top / newest activity
<div class="tag success">Created</div> - Add to the initial entry note when the case is created
<div class="tag danger">Cancelled</div> - Add to the cancellation reason entry if a case is cancelled
-->
</div>
<div class="case-activity-header-datetime">
<div class="case-activity-clock-icon w-embed">
<svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path><polygon points="20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22"></polygon></svg>
</div>
<div>November 23 2023 @ 8:32am (35 days ago)</div>
</div>
<img loading="lazy" src="{user/note creator - Avatar}" alt="{user/note creator - First & Last Names}" class="case-activity-avatar">
</div>
<div class="case-activity-detail-panel">
<div class="case-activity-comment">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<!-- START Attachments, omit if no attachments for this note -->
<div class="case-activity-attachments">
<!-- START Attachment - duplicate per attachment -->
<a href="#" class="attachment w-inline-block">
<div class="attachment-filetype-icon w-embed">
<svg>{attachment type icon (eg. PDF)}</svg>
</div>
<div>filename 1.pdf</div>
<div class="attachment-delete-icon w-embed">
<svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><rect x="12" y="12" width="2" height="12"></rect><rect x="18" y="12" width="2" height="12"></rect><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"></path><rect x="12" y="2" width="8" height="2"></rect></svg>
</div>
</a>
<!-- END Attachment -->
</div>
<!-- END Attachments -->
</div>
</div>
<!-- END Activity -->
</div>
</div>
</div>