115 lines
4.1 KiB
HTML
115 lines
4.1 KiB
HTML
<div class="compose-workspace-widget">
|
|
<div class="columns is-mobile is-gapless">
|
|
<div class="column is-12-mobile is-12-tablet">
|
|
<div
|
|
style="
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.5rem 0.25rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
">
|
|
<p class="is-size-7 has-text-weight-semibold">Manual Workspace</p>
|
|
<h3 class="title is-6" style="margin-bottom: 0.5rem;">Choose A Contact</h3>
|
|
<p class="is-size-7">
|
|
Open one or more direct chat widgets and keep them live in this workspace.
|
|
</p>
|
|
</div>
|
|
|
|
<form
|
|
id="compose-workspace-window-form"
|
|
style="
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.5rem 0.25rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
">
|
|
<label class="label is-small" for="compose-workspace-limit">Window</label>
|
|
<div class="select is-fullwidth is-small">
|
|
<select id="compose-workspace-limit" name="limit">
|
|
{% for option in limit_options %}
|
|
<option value="{{ option }}" {% if option == limit %}selected{% endif %}>
|
|
{{ option }} messages
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<p class="help">
|
|
How many recent messages to load in each new message widget.
|
|
</p>
|
|
</form>
|
|
|
|
<div>
|
|
{% if contact_rows %}
|
|
<div class="buttons are-small" style="display: grid; gap: 0.5rem;">
|
|
{% for row in contact_rows %}
|
|
<button
|
|
class="button is-fullwidth"
|
|
style="
|
|
border-radius: 8px;
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
"
|
|
hx-get="{{ row.compose_widget_url }}"
|
|
hx-include="#compose-workspace-window-form"
|
|
hx-target="#widgets-here"
|
|
hx-swap="afterend">
|
|
<span
|
|
class="tags has-addons"
|
|
style="
|
|
display: inline-flex;
|
|
width: 100%;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
">
|
|
<span
|
|
class="tag is-dark"
|
|
style="min-width: 2.5rem; justify-content: center;">
|
|
<i class="{{ manual_icon_class }}" aria-hidden="true"></i>
|
|
</span>
|
|
<span
|
|
class="tag is-white"
|
|
style="
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding-left: 0.7rem;
|
|
padding-right: 0.7rem;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
min-width: 0;
|
|
">
|
|
<span
|
|
style="
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.45rem;
|
|
min-width: 0;
|
|
">
|
|
<strong>{{ row.person_name }}</strong>
|
|
<small class="has-text-grey">{{ row.service|title }}</small>
|
|
</span>
|
|
<small
|
|
class="has-text-grey"
|
|
style="
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-all;
|
|
text-align: right;
|
|
">
|
|
{{ row.identifier }}
|
|
</small>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="has-text-grey">No contacts available yet.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|