healthchecks_healthchecks/templates/front/update_name_modal.html

<div id="update-name-modal" class="modal with-slug-suggestions">
    <div class="modal-dialog">
        <form
            id="update-name-form"
            {% if check %}action="{% url 'hc-update-name' check.code %}"{% endif %}
            class="form-horizontal"
            method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Name and Tags</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="update-name-input" class="col-sm-2 control-label">
                            Name
                        </label>
                        <div class="col-sm-10">
                            <input
                                id="update-name-input"
                                name="name"
                                type="text"
                                maxlength="100"
                                value="{{ check.name }}"
                                placeholder="unnamed"
                                class="form-control" />

                            <span class="help-block">
                                Give this check a human-friendly name,
                                so you can easily recognize it later.
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-slug-input" class="col-sm-2 control-label">
                            Slug
                        </label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input
                                    id="update-slug-input"
                                    name="slug"
                                    type="text"
                                    maxlength="100"
                                    value="{{ check.slug }}"
                                    pattern="[a-z0-9_\-]+"
                                    data-src-id="update-name-input"
                                    data-btn-id="use-suggested"
                                    data-preview-id="slug-help"
                                    class="form-control" />
                                <span class="input-group-btn">
                                    <button
                                        class="btn btn-default use-suggested-slug"
                                        type="button">Use Suggested</button>
                                </span>
                            </div>
                            <span class="help-block slug-help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-tags-input" class="col-sm-2 control-label">
                            Tags
                        </label>
                        <div class="col-sm-10">
                            <input
                                id="update-tags-input"
                                name="tags"
                                type="text"
                                maxlength="500"
                                data-all-tags="{{ all_tags }}"
                                value="{{ check.tags }}" />

                            <span class="help-block">
                                Use tags for easy filtering and for status badges.
                                Separate multiple tags with spaces.
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="update-desc-input" class="col-sm-2 control-label">
                            Description
                        </label>
                        <div class="col-sm-10">
                            <textarea
                                id="update-desc-input"
                                class="form-control"
                                rows="5"
                                name="desc">{{ check.desc }}</textarea>
                            <span class="help-block">
                                Additional notes for your own reference. Will appear
                                in email alerts and Slack notifications.
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>