location_details.j2.html

<style>
#map {
    max-height: 35%;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-auto">
            <h3>Location details</h3>
        </div>
    </div>
    <div class="row">
        <label for="location-email" class="col-sm-3 col-form-label">Email</label>
        <div class="col-sm-9" id="location-email">
            {{ location.email }}
        </div>
    </div>
    <div class="row">
        <label for="location-description" class="col-sm-3 col-form-label">Location description</label>
        <div class="col-sm-3">
            {{ location.description }}
        </div>
    </div>
    <div class="row">
        <div class="col-auto">
            <a href="https://twitter.com/intent/tweet?url={{ url_for('index', id=location.id, _external=True) | urlencode }}&text={{ "Check out this super special location!" | urlencode }}" class="btn btn-primary">Tweet location</a>

            <a href="#" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#removal-request-modal">Request removal</a>

            <form class="modal" id="removal-request-modal" tabindex="-1" aria-labelledby="removal-request-title" aria-hidden="true" action="{{ url_for('page_removal_request', id=location.id) }}" method="POST">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="removal-request-title">Request location removal</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="request-removal-email" class="form-label">Email address</label>
                                <input type="text" class="form-control" id="request-removal-email" name="request-removal-email" aria-describedby="request-removal-email-help" required>
                                <div id="request-removal-email-help" class="form-text">Please fill out your email for removal.</div>
                            </div>
                            <div class="mb-3">
                                <label for="request-removal-reason" class="form-label">Removal request details</label>
                                <textarea class="form-control" name="request-removal-reason" id="request-removal-reason" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Submit removal request</button>
                        </div>
                </div>
            </form>

        </div>
    </div>
</div>