Files
workout/templates/partials/workout_note.html
2023-07-12 20:52:49 +10:00

47 lines
3.0 KiB
HTML

<div id="workout-note" hx-target="this" hx-swap="outerHTML swap:0.5s">
{% if is_edit|default(false, true) == false %}
{% if note|length > 0 %}
<span class="text-base font-normal text-gray-500">{{ note }}</span>
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
hx-target="#workout-note">
Edit
</a>
{% else %}
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer float-right"
hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
hx-target="#workout-note">
Add note
</a>
{% endif %}
{% else %}
<div class="flex items-center">
<textarea
class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your note..." name="note" rows="2">{{ note }}</textarea>
<div class="flex flex-col">
<button
class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
hx-get="{{ url_for('get_workout_note', person_id=person_id, workout_id=workout_id) }}"
hx-target="#workout-note">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="sr-only">Cancel</span>
</button>
<button
class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
hx-put="{{ url_for('update_workout_note', person_id=person_id, workout_id=workout_id) }}"
hx-include="[name='note']">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
<span class="sr-only">Save note</span>
</button>
</div>
</div>
{% endif %}
</div>