import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

export default function AdvancedSearch(props) {
    let { t } = useTranslation();

    const [query, setQuery] = useState("");
    const handleParam = (setValue) => (e) => setValue(e.target.value);

    const advancedSearch = (event) => {
        event.preventDefault();
        console.log(query);
        // /searchresults

        router.push({
            pathname: "/searchresults",
            query: { q: query },
        });
    };

    const router = useRouter();
    const { locale } = router;
    return (
        <div>
            <form onSubmit={advancedSearch}>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="card" id="searchforcase-card">
                            <div className="card-body">
                                <div className="govuk-body-m ">
                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                        <h1 className="govuk-fieldset__heading govuk-heading-m">
                                            {t("search:search-title-label")}
                                        </h1>
                                    </legend>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="address-county"
                                        >
                                            {t("search:casereference-label")}
                                        </label>
                                        <input
                                            className="govuk-input govuk-!-width-two-thirds"
                                            id="address-county"
                                            name="address-county"
                                            type="text"
                                            onChange={handleParam(setQuery)}
                                        />
                                    </div>
                                    <fieldset className="govuk-fieldset">
                                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                            <h3 className="govuk-heading-m">
                                                {t(
                                                    "search:sitelocation-legend"
                                                )}
                                            </h3>
                                        </legend>
                                        <div className="govuk-form-group">
                                            <label
                                                className="govuk-label"
                                                htmlFor="address-line-1"
                                            >
                                                {t(
                                                    "search:address-line-one-label"
                                                )}
                                            </label>
                                            <input
                                                className="govuk-input"
                                                id="address-line-1"
                                                name="address-line-1"
                                                type="text"
                                                autoComplete="address-line1"
                                                onChange={handleParam(setQuery)}
                                            />
                                        </div>

                                        <div className="govuk-form-group">
                                            <label
                                                className="govuk-label"
                                                htmlFor="address-town"
                                            >
                                                {t("search:town-label")}
                                            </label>
                                            <input
                                                className="govuk-input govuk-!-width-two-thirds"
                                                id="address-town"
                                                name="address-town"
                                                type="text"
                                                autoComplete="address-level2"
                                            />
                                        </div>

                                        <div className="govuk-form-group">
                                            <label
                                                className="govuk-label"
                                                htmlFor="address-county"
                                            >
                                                {t("search:county-label")}
                                            </label>
                                            <input
                                                className="govuk-input govuk-!-width-two-thirds"
                                                id="address-county"
                                                name="address-county"
                                                type="text"
                                            />
                                        </div>

                                        <div className="govuk-form-group">
                                            <label
                                                className="govuk-label"
                                                htmlFor="address-postcode"
                                            >
                                                {t("search:postcode-label")}
                                            </label>
                                            <input
                                                className="govuk-input govuk-input--width-10"
                                                id="address-postcode"
                                                name="address-postcode"
                                                type="text"
                                                autoComplete="postal-code"
                                            />
                                        </div>
                                    </fieldset>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="address-postcode"
                                        >
                                            {t("search:lpa-label")}{" "}
                                        </label>
                                        <input
                                            className="govuk-input govuk-input--width-10"
                                            id="address-postcode"
                                            name="address-postcode"
                                            type="text"
                                            autoComplete="postal-code"
                                        />
                                    </div>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="address-postcode"
                                        >
                                            {t("search:lpa-reference-label")}{" "}
                                        </label>
                                        <input
                                            className="govuk-input govuk-input--width-10"
                                            id="address-postcode"
                                            name="address-postcode"
                                            type="text"
                                            autoComplete="postal-code"
                                        />
                                    </div>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="sort"
                                        >
                                            {t("search:case-type-label")}{" "}
                                        </label>
                                        <select
                                            className="govuk-select"
                                            id="sort"
                                            name="sort"
                                        >
                                            <option value="">
                                                {t("search:case-type-option-1")}
                                            </option>
                                            <option value="Any/All">
                                                {t("search:case-type-option-2")}
                                            </option>
                                            <option value="Advertisement Appeals">
                                                {t("search:case-type-option-3")}
                                            </option>
                                            <option value="Called in Planning Applications">
                                                {t("search:case-type-option-4")}
                                            </option>
                                            <option value="Discontinuance Notice Appeals">
                                                {t("search:case-type-option-5")}
                                            </option>
                                            <option value="Enforcement Listed Building and Conservation Area Appeals">
                                                {t("search:case-type-option-6")}
                                            </option>
                                            <option value="Enforcement Appeals">
                                                {t("search:case-type-option-7")}
                                            </option>
                                            <option value="Householder Appeals">
                                                {t("search:case-type-option-8")}
                                            </option>
                                            <option value="Lawful Development Certificate Appeals">
                                                {t("search:case-type-option-9")}
                                            </option>
                                            <option value="Planning Appeals">
                                                {t(
                                                    "search:case-type-option-10"
                                                )}
                                            </option>
                                            <option value="Planning Obligation Appeals">
                                                {t(
                                                    "search:case-type-option-11"
                                                )}
                                            </option>
                                            <option value="Planning Listed Building and Conservation Area Appeals">
                                                {t(
                                                    "search:case-type-option-12"
                                                )}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="card" id="advancedsearch-card">
                            <div className="card-body">
                                <div className="govuk-body-m ">
                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                        <h3 className="govuk-heading-m">
                                            {t(
                                                "search:advanced-search-title-label"
                                            )}
                                        </h3>
                                    </legend>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="address-line-1"
                                        >
                                            {t("search:applicant-label")}
                                        </label>
                                        <input
                                            className="govuk-input"
                                            id="address-line-1"
                                            name="address-line-1"
                                            type="text"
                                            autoComplete="address-line1"
                                        />
                                    </div>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="address-town"
                                        >
                                            {t("search:other-party-label")}
                                        </label>
                                        <input
                                            className="govuk-input govuk-!-width-two-thirds"
                                            id="address-town"
                                            name="address-town"
                                            type="text"
                                            autoComplete="address-level2"
                                        />
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t(
                                                        "search:hearing-date-label"
                                                    )}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t(
                                                        "search:site-visit-date-label"
                                                    )}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t(
                                                        "search:callin-date-label"
                                                    )}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t("search:date-received")}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t(
                                                        "search:start-date-label"
                                                    )}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group form-inline-label">
                                        <fieldset
                                            className="govuk-fieldset"
                                            role="group"
                                            aria-describedby="passport-issued-hint"
                                        >
                                            {" "}
                                            <div className="inlineFieldset">
                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
                                                    {t(
                                                        "search:decision-date-label"
                                                    )}
                                                </legend>
                                                <div
                                                    className="govuk-date-input"
                                                    id="passport-issued"
                                                >
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-day"
                                                            >
                                                                Day
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-day"
                                                                name="passport-issued-day"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-month"
                                                            >
                                                                Month
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                                                                id="passport-issued-month"
                                                                name="passport-issued-month"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group">
                                                            <label
                                                                className="govuk-label govuk-date-input__label"
                                                                htmlFor="passport-issued-year"
                                                            >
                                                                Year
                                                            </label>
                                                            <input
                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                                                                id="passport-issued-year"
                                                                name="passport-issued-year"
                                                                type="text"
                                                                pattern="[0-9]*"
                                                                inputMode="numeric"
                                                            />
                                                        </div>
                                                    </div>

                                                    <div className="govuk-date-input__item">
                                                        <div className="govuk-form-group"></div>

                                                        <div className="govuk-checkboxes__item">
                                                            <input
                                                                className="govuk-checkboxes__input"
                                                                id="waste-3"
                                                                name="waste"
                                                                type="checkbox"
                                                                value="farm"
                                                            />
                                                            <label
                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
                                                                htmlFor="waste-3"
                                                            >
                                                                {t(
                                                                    "search:date-margin-label"
                                                                )}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div className="govuk-form-group ">
                                        <label
                                            className="govuk-label"
                                            htmlFor="sort"
                                        >
                                            {t("search:procedure-type-label")}
                                        </label>
                                        <select
                                            className="govuk-select"
                                            id="sort"
                                            name="sort"
                                        >
                                            <option value="">
                                                {t(
                                                    "search:procedure-type-option-1"
                                                )}
                                            </option>
                                            <option value="Hearing">
                                                {t(
                                                    "search:procedure-type-option-2"
                                                )}
                                            </option>
                                            <option value="Inquiry">
                                                {t(
                                                    "search:procedure-type-option-3"
                                                )}
                                            </option>
                                            <option value="Written representations">
                                                {t(
                                                    "search:procedure-type-option-4"
                                                )}
                                            </option>
                                        </select>
                                    </div>
                                    <div className="govuk-form-group">
                                        <label
                                            className="govuk-label"
                                            htmlFor="sort"
                                        >
                                            {t("search:status-label")}
                                        </label>
                                        <select
                                            className="govuk-select"
                                            id="sort"
                                            name="sort"
                                        >
                                            <option value="">
                                                {t("search:status-option-1")}
                                            </option>
                                            <option value="Any">
                                                {t("search:status-option-2")}
                                            </option>
                                            <option value="In progress">
                                                {t("search:status-option-3")}
                                            </option>
                                            <option value="Complete">
                                                {t("search:status-option-4")}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-form-group">
                            <button
                                type="submit"
                                name="search"
                                className="govuk-button"
                            >
                                Search
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    );
}