<div class="m-2 m-lg-4">
    <div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
    <h2 class="text-center mb-4">Report a Bug</h2>
    <hr>
    <p class="text-center text-sm-start">
        Thank you for visiting our bug reporting page. We value our users' input highly and in an effort to better serve your needs, please fill out the form below to help us address this issue.
    </p>
    <p class="text-center text-sm-start">
        We read each and every bug report submitted, and by submitting this form you allow us to send you a follow-up email.
    </p>
    <form method="post">
        <!-- Page URL -->
        <div class="mb-3">
            <label for="url" class="form-label">Page you were trying to reach:</label>
            <input type="url" name="url" id="url" class="form-control" aria-describedby="urlHelp" required>
            <small id="urlHelp" class="form-text text-muted">
                This is the URL of the page you actually received the error.
            </small>
        </div>

        <!-- Referrer URL -->
        <div class="mb-3">
            <label for="ourl" class="form-label">Page you were on:</label>
            <input type="url" name="ourl" id="ourl" class="form-control" aria-describedby="ourlHelp">
            <small id="ourlHelp" class="form-text text-muted">
                This is the URL of the page you were on before you received the error.
            </small>
        </div>

        <!-- Repeat Issue -->
        <div class="mb-3">
            <label class="form-label">*Has this happened more than once?</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="repeat" id="repeatNo" value="false" checked>
                <label class="form-check-label" for="repeatNo">No</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="repeat" id="repeatYes" value="true">
                <label class="form-check-label" for="repeatYes">Yes</label>
            </div>
        </div>

        <!-- Description -->
        <div class="mb-3">
            <label for="entry" class="form-label">Describe the error you received: </label>
            <textarea class="form-control" name="entry" id="entry" rows="6" maxlength="2000" aria-describedby="descHelp" required></textarea>
            <small id="descHelp" class="form-text text-muted">
                (max: 2000 characters)
            </small>
        </div>

        <!-- Hidden Token -->
        <input type="hidden" name="token" value="{TOKEN}">

        <!-- Submit Button -->
        <div class="text-center">
            <button type="submit" name="submit" value="submit" class="btn btn-primary btn-lg">Submit</button>
        </div>
    </form>
</div>
</div>