<form action="{% url 'settings-form' %}" method="post" accept-charset="utf-8"
    enctype="multipart/form-data" autocomplete="off"
    hx-boost="true"
    hx-target="this"
    hx-swap="outerHTML"
    hx-trigger="change">
    {% load static %}
    {% csrf_token %}
    <h4 class="card-title">Import Activities</h4>
    <p>
        Use the following settings to configure where your activity files should be stored.
    </p>
    <div class="row">
        <label class="col-md-4 col-form-label text-right">
            {{ form.path_to_trace_dir.label }}&nbsp;
            <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="bottom"
                title="Enter path to a directory which both contains your activity files to be
imported and will be used to store the files imported from your device.">
            </i>
        </label>
        <div class="col-md-8">
            <div class="form-group">
                {{ form.path_to_trace_dir }}
            </div>
        </div>
    </div>
    <h4 class="card-title">Fetch Files from Device</h4>
    <p>
        Use the following settings to configure the path to your device, from which the activity files should be fetched.
    </p>
    <div class="row">
        <label class="col-md-4 col-form-label text-right">
            {{ form.path_to_garmin_device.label }}&nbsp;
            <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="bottom"
                title="Enter the path to a directory in which your connected
device shows up after mounting. Workoutizer will search for
a folder called 'Activity' containing .fit files.">
            </i>
        </label>
        <div class="col-md-8">
            <div class="form-group">
                {{ form.path_to_garmin_device }}
            </div>
        </div>
    </div>
    <div class="row">
        <label class="col-md-4 col-form-label text-right">
            {{ form.delete_files_after_import.label }}&nbsp;
            <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="bottom"
                        title="Enable this option to delete fit files from your
Garmin device after a successful import. The imported
copy in 'Traces Directory' will stay untouched.">
            </i>
        </label>
        <div class="col-md-8">
            <div class="form-check">
                <label class="form-check-label">
                    {{ form.delete_files_after_import }}
                    <span class="form-check-sign"></span>
                </label>
            </div>
        </div>
    </div>
    {% comment %} htmx indicator - loading bar {% endcomment %}
    <div class="row">
        <div class="col-md-5">
        </div>
        <div class="col-md-2">
            <img class="htmx-indicator" id="loading-bar" src="{% static 'img/bars.svg'%}" width="50" />
        </div>
        <div class="col-md-5">
        </div>
    </div>
</form>
