@{
    ViewData["Title"] = "Craft PC";
}

<div class="mt-3">
    <div id="part-selection">
        <div class="container mt-3">
            <div class="radio-tile-group">
                <div class="input-container">
                    <input id="processor" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512"
                                 width="512"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="XMLID_1542_">
                                    <g id="XMLID_671_">
                                        <path id="XMLID_672_"
                                              d="m366 136h-64.873c-5.522 0-10 4.477-10 10s4.478 10 10 10h54.873v200h-200v-200h55.127c5.522 0 10-4.477 10-10s-4.478-10-10-10h-65.127c-5.522 0-10 4.477-10 10v220c0 5.522 4.478 10 10 10h220c5.522 0 10-4.478 10-10v-220c0-5.523-4.478-10-10-10z" />
                                        <path id="XMLID_1085_"
                                              d="m180 190v44c0 5.523 4.478 10 10 10h44c5.522 0 10-4.477 10-10v-44c0-5.523-4.478-10-10-10h-44c-5.522 0-10 4.477-10 10zm20 10h24v24h-24z" />
                                        <path id="XMLID_1086_"
                                              d="m278 200h44c5.522 0 10-4.477 10-10s-4.478-10-10-10h-44c-5.522 0-10 4.477-10 10s4.478 10 10 10z" />
                                        <path id="XMLID_1087_"
                                              d="m278 244h44c5.522 0 10-4.477 10-10s-4.478-10-10-10h-44c-5.522 0-10 4.477-10 10s4.478 10 10 10z" />
                                        <path id="XMLID_1088_"
                                              d="m278 332h44c5.522 0 10-4.478 10-10v-44c0-5.522-4.478-10-10-10s-10 4.478-10 10v34h-34c-5.522 0-10 4.478-10 10s4.478 10 10 10z" />
                                        <path id="XMLID_1089_"
                                              d="m278 288c2.63 0 5.21-1.07 7.069-2.931 1.861-1.859 2.931-4.439 2.931-7.069s-1.07-5.21-2.931-7.07c-1.859-1.86-4.439-2.93-7.069-2.93s-5.21 1.069-7.07 2.93-2.93 4.44-2.93 7.07 1.069 5.21 2.93 7.069c1.86 1.861 4.44 2.931 7.07 2.931z" />
                                        <path id="XMLID_1090_"
                                              d="m234 312h-44c-5.522 0-10 4.478-10 10s4.478 10 10 10h44c5.522 0 10-4.478 10-10s-4.478-10-10-10z" />
                                        <path id="XMLID_1092_"
                                              d="m234 268h-44c-5.522 0-10 4.478-10 10s4.478 10 10 10h44c5.522 0 10-4.478 10-10s-4.478-10-10-10z" />
                                        <path id="XMLID_1133_"
                                              d="m502 266c5.522 0 10-4.478 10-10 0-5.523-4.478-10-10-10h-78v-36h38c5.522 0 10-4.477 10-10s-4.478-10-10-10h-38v-36h78c5.522 0 10-4.477 10-10s-4.478-10-10-10h-78.596c-3.488-23.384-22.02-41.916-45.404-45.404v-78.596c0-5.523-4.478-10-10-10s-10 4.477-10 10v78h-36v-38c0-5.523-4.478-10-10-10s-10 4.477-10 10v38h-36v-78c0-5.523-4.478-10-10-10s-10 4.477-10 10v78h-36v-38c0-5.523-4.478-10-10-10s-10 4.477-10 10v38h-36v-78c0-5.523-4.478-10-10-10s-10 4.477-10 10v78.596c-23.384 3.488-41.916 22.02-45.404 45.404h-78.596c-5.522 0-10 4.477-10 10s4.478 10 10 10h78v36h-38c-5.522 0-10 4.477-10 10s4.478 10 10 10h38v36h-78c-5.522 0-10 4.477-10 10 0 5.522 4.478 10 10 10h78v36h-38c-5.522 0-10 4.478-10 10s4.478 10 10 10h38v36h-78c-5.522 0-10 4.478-10 10s4.478 10 10 10h78.596c3.488 23.384 22.02 41.916 45.404 45.404v78.596c0 5.522 4.478 10 10 10s10-4.478 10-10v-78h36v38c0 5.522 4.478 10 10 10s10-4.478 10-10v-38h36v78c0 5.522 4.478 10 10 10s10-4.478 10-10v-78h36v38c0 5.522 4.478 10 10 10s10-4.478 10-10v-38h36v78c0 5.522 4.478 10 10 10s10-4.478 10-10v-78.596c23.383-3.488 41.916-22.02 45.404-45.404h78.596c5.522 0 10-4.478 10-10s-4.478-10-10-10h-78v-36h38c5.522 0 10-4.478 10-10s-4.478-10-10-10h-38v-36zm-98 104c0 18.748-15.252 34-34 34h-228c-18.748 0-34-15.252-34-34v-228c0-18.748 15.252-34 34-34h228c18.748 0 34 15.252 34 34z" />
                                        <path id="XMLID_1135_"
                                              d="m256.13 156c2.63 0 5.21-1.07 7.07-2.93 1.859-1.86 2.93-4.44 2.93-7.07s-1.07-5.21-2.93-7.07-4.44-2.93-7.07-2.93c-2.64 0-5.21 1.07-7.07 2.93-1.87 1.86-2.93 4.44-2.93 7.07s1.06 5.21 2.93 7.07c1.86 1.86 4.43 2.93 7.07 2.93z" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <label for="processor" class="radio-tile-label mt-2">Processor</label>
                    </div>
                </div>
                <div class="input-container">
                    <input id="gpu" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg enable-background="new 0 0 511.911 511.911" height="512"
                                 viewBox="0 0 511.911 511.911" width="512"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <path d="m438.384 287.304c3.501-2.214 4.565-6.859 2.353-10.36-2.215-3.502-6.827-4.559-10.327-2.345-.382.233-6.167 3.696-14.177 4.073 11.048-9.738 14.061-22.422 14.23-23.172.911-4.04-1.621-8.078-5.662-8.988-4.039-.909-8.049 1.604-8.96 5.644-.104.435-1.745 6.977-7.145 12.909.927-14.7-5.913-25.801-6.323-26.451-2.215-3.503-6.861-4.565-10.359-2.352-3.501 2.213-4.558 6.825-2.345 10.326.234.381 3.699 6.167 4.075 14.179-9.739-11.049-22.424-14.062-23.174-14.231-4.035-.908-8.055 1.628-8.965 5.668-.911 4.041 1.627 8.055 5.668 8.965.107.024 6.799 1.61 12.863 7.134-14.701-.927-25.803 5.913-26.453 6.322-3.501 2.214-4.545 6.847-2.332 10.348 2.215 3.5 6.846 4.545 10.348 2.332.093-.059 5.946-3.671 14.141-4.053-11.052 9.74-14.066 22.428-14.235 23.178-.911 4.04 1.627 8.055 5.668 8.965.555.125 1.109.186 1.655.186 3.43 0 6.524-2.367 7.31-5.854.024-.106 1.61-6.799 7.134-12.863-.928 14.701 5.912 25.804 6.322 26.453 1.431 2.263 3.877 3.508 6.374 3.508 1.366 0 2.748-.373 3.986-1.155 3.501-2.214 4.558-6.825 2.345-10.327-.234-.381-3.699-6.167-4.075-14.18 9.739 11.05 22.425 14.064 23.175 14.233.555.125 1.109.186 1.655.186 3.43 0 6.524-2.367 7.31-5.854.911-4.04-1.627-8.055-5.668-8.965-.106-.024-6.792-1.608-12.854-7.126.929.059 1.844.088 2.743.088 13.315-.002 23.09-6.037 23.699-6.421z" />
                                    <path d="m467.722 213.078h8.817c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-8.817c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m476.539 348.85h-8.817c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h8.817c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5z" />
                                    <path d="m172.005 367.341h45.03c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-45.03c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m164.505 330.294c0 4.143 3.357 7.5 7.5 7.5h45.03c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-45.03c-4.143 0-7.5 3.357-7.5 7.5z" />
                                    <path d="m217.035 193.853c4.143 0 7.5-3.357 7.5-7.5v-1.888c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v1.888c0 4.142 3.358 7.5 7.5 7.5z" />
                                    <path d="m209.535 209.275c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-1.887c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5z" />
                                    <path d="m209.535 232.199c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-1.887c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5z" />
                                    <path d="m209.535 255.123c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-1.887c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5z" />
                                    <path d="m181.192 177.881h-24.921c-7.273 0-13.191 5.918-13.191 13.191v79.026c0 7.273 5.918 13.191 13.191 13.191h24.921c7.273 0 13.191-5.918 13.191-13.191v-79.026c.001-7.273-5.917-13.191-13.191-13.191zm-1.808 90.409h-21.304v-75.409h21.304z" />
                                    <path d="m264.464 191.965c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-8.464c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m240.269 209.275c0 4.143 3.357 7.5 7.5 7.5h8.463c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-8.463c-4.143 0-7.5 3.358-7.5 7.5z" />
                                    <path d="m322.137 280.964c0 40.747 33.149 73.896 73.896 73.896 22.366 0 43.29-9.979 57.405-27.378 2.609-3.217 2.117-7.94-1.099-10.55-3.22-2.611-7.94-2.117-10.55 1.099-11.255 13.873-27.932 21.829-45.757 21.829-32.476 0-58.896-26.421-58.896-58.896s26.421-58.896 58.896-58.896 58.896 26.42 58.896 58.896c0 4.272-.477 8.586-1.416 12.819-.896 4.044 1.654 8.05 5.697 8.947 4.051.896 8.05-1.654 8.947-5.697 1.176-5.3 1.771-10.706 1.771-16.069 0-40.746-33.149-73.896-73.896-73.896-40.745 0-73.894 33.15-73.894 73.896z" />
                                    <path d="m504.411 152.135h-411.395v-18.795l37.517-5.167c6.314-.869 11.076-6.331 11.076-12.706v-18.096c0-6.373-4.762-11.836-11.076-12.706l-37.517-5.167v-24.639c0-8.565-6.968-15.533-15.533-15.533h-16.962c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h16.962c.294 0 .533.239.533.533v402.726h-24.457v-366.73c0-8.565-6.968-15.534-15.533-15.534h-23.026v-20.995h15.533c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-23.033c-4.143 0-7.5 3.357-7.5 7.5v35.995c0 4.143 3.357 7.5 7.5 7.5h30.525c.294 0 .533.239.533.534v109.977h-18.275c-4.143 0-7.5 3.357-7.5 7.5v41.694c0 4.143 3.357 7.5 7.5 7.5h18.275v25.938h-18.275c-4.143 0-7.5 3.357-7.5 7.5v78.66c0 4.143 3.357 7.5 7.5 7.5h18.275v87.961c0 4.143 3.357 7.5 7.5 7.5h39.457c4.143 0 7.5-3.357 7.5-7.5v-35.291h51.195c4.143 0 7.5-3.357 7.5-7.5v-21.685h20.179c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-27.679c-4.143 0-7.5 3.357-7.5 7.5v21.685h-43.694v-37.67h27.632c4.143 0 7.5-3.357 7.5-7.5v-15.646h13.896c4.143 0 7.5-3.357 7.5-7.5v-32.368c0-4.143-3.357-7.5-7.5-7.5h-13.896v-15.646c0-4.143-3.357-7.5-7.5-7.5h-27.632v-25.938h27.632c4.143 0 7.5-3.357 7.5-7.5v-41.694c0-4.143-3.357-7.5-7.5-7.5h-27.632v-33.697h227.91l-100.967 98.461c-2.703 2.636-3.025 6.871-.751 9.886l83.079 110.128h-100.41c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h19.146v21.685c0 4.143 3.357 7.5 7.5 7.5h156.227c4.143 0 7.5-3.357 7.5-7.5v-21.685h112.162c4.143 0 7.5-3.357 7.5-7.5v-233.475c-.001-4.143-3.358-7.5-7.501-7.5zm-476.628 90.391v-26.694h10.775v26.694zm0 119.598v-63.66h10.775v63.66zm98.825-262.858v14.306l-33.593 4.627v-23.56zm-13.461 199.198v15.646c0 4.143 3.357 7.5 7.5 7.5h13.896v17.368h-13.896c-4.143 0-7.5 3.357-7.5 7.5v15.646h-20.131v-63.66zm0-82.632v26.694h-20.131v-26.694zm186.203 184.777h14.573v14.185h-14.573zm-15 14.185h-14.572v-14.185h14.572zm44.573-14.185h14.572v14.185h-14.572zm-92.901 0h18.755v14.185h-18.755zm141.227 14.185h-18.754v-14.185h18.754zm119.662-29.185h-175.834l-85.915-113.888 107.248-104.586h154.501z" />
                                </g>
                            </svg>
                        </div>
                        <label for="gpu" class="radio-tile-label mt-2">GPU</label>
                    </div>
                </div>
                <div class="input-container">
                    <input id="ram" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg height="512" viewBox="0 0 74 74" width="512"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="m69 50.719h-64a3 3 0 0 1 -3-3v-29a3 3 0 0 1 3-3h64a3 3 0 0 1 3 3v29a3 3 0 0 1 -3 3zm-64-33a1 1 0 0 0 -1 1v29a1 1 0 0 0 1 1h64a1 1 0 0 0 1-1v-29a1 1 0 0 0 -1-1z" />
                                <path d="m64.625 58.281h-55.25a1.939 1.939 0 0 1 -1.937-1.937v-6.625a1 1 0 0 1 1-1h57.124a1 1 0 0 1 1 1v6.625a1.939 1.939 0 0 1 -1.937 1.937zm-55.187-2h55.187l-.053-5.562h-55.134z" />
                                <path d="m58.75 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m52.536 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m46.321 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m40.107 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m33.893 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m27.679 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m21.464 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m15.25 58.281a1 1 0 0 1 -1-1v-3.125a1 1 0 0 1 2 0v3.125a1 1 0 0 1 -1 1z" />
                                <path d="m62.786 44.281h-6.072a1.464 1.464 0 0 1 -1.464-1.463v-19.198a1.465 1.465 0 0 1 1.464-1.464h6.072a1.465 1.465 0 0 1 1.464 1.464v19.2a1.464 1.464 0 0 1 -1.464 1.461zm-5.536-2h5v-18.125h-5z" />
                                <path d="m47.62 44.281h-6.073a1.464 1.464 0 0 1 -1.464-1.463v-19.198a1.465 1.465 0 0 1 1.464-1.464h6.073a1.464 1.464 0 0 1 1.463 1.464v19.2a1.464 1.464 0 0 1 -1.463 1.461zm-5.537-2h5v-18.125h-5z" />
                                <path d="m32.453 44.281h-6.073a1.464 1.464 0 0 1 -1.463-1.463v-19.198a1.464 1.464 0 0 1 1.463-1.464h6.073a1.465 1.465 0 0 1 1.464 1.464v19.2a1.464 1.464 0 0 1 -1.464 1.461zm-5.536-2h5v-18.125h-5z" />
                                <path d="m17.286 44.281h-6.072a1.464 1.464 0 0 1 -1.464-1.463v-19.198a1.465 1.465 0 0 1 1.464-1.464h6.072a1.465 1.465 0 0 1 1.464 1.464v19.2a1.464 1.464 0 0 1 -1.464 1.461zm-5.536-2h5v-18.125h-5z" />
                            </svg>
                        </div>
                        <label for="ram" class="radio-tile-label mt-2">RAM</label>
                    </div>
                </div>
                <div class="input-container">
                    <input id="motherboard" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512"
                                 width="512"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <path d="m483.622 0h-430.232c-13.556 0-24.585 11.029-24.585 24.585v74.5h-17.511c-4.143 0-7.5 3.358-7.5 7.5v40.445c0 4.142 3.357 7.5 7.5 7.5h17.512v21.384h-17.512c-4.143 0-7.5 3.358-7.5 7.5v81.552c0 4.143 3.357 7.5 7.5 7.5h17.512v21.384h-17.512c-4.143 0-7.5 3.357-7.5 7.5v40.776c0 4.143 3.357 7.5 7.5 7.5h17.512v21.384h-17.512c-4.143 0-7.5 3.357-7.5 7.5v40.776c0 4.143 3.357 7.5 7.5 7.5h17.512v60.628c-.001 13.557 11.028 24.586 24.584 24.586h267.517c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-267.517c-5.285 0-9.585-4.3-9.585-9.586v-60.628h26.719c4.143 0 7.5-3.357 7.5-7.5v-40.776c0-4.143-3.357-7.5-7.5-7.5h-26.719v-21.384h7.933c4.143 0 7.5-3.357 7.5-7.5v-40.776c0-4.143-3.357-7.5-7.5-7.5h-7.933v-21.384h7.933c4.143 0 7.5-3.357 7.5-7.5v-81.552c0-4.142-3.357-7.5-7.5-7.5h-7.933v-21.384h7.933c4.143 0 7.5-3.358 7.5-7.5v-40.445c0-4.142-3.357-7.5-7.5-7.5h-7.933v-74.5c0-5.286 4.3-9.585 9.585-9.585h205.557v239.995c0 8.812 7.169 15.981 15.981 15.981h12.977c8.812 0 15.982-7.169 15.982-15.981v-239.995h16.513v239.995c0 8.812 7.169 15.981 15.981 15.981h12.977c8.812 0 15.982-7.169 15.982-15.981v-145.051c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v145.051c0 .541-.44.981-.982.981h-12.977c-.541 0-.981-.44-.981-.981v-239.995h14.94v64.957c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-64.957h118.281c5.285 0 9.585 4.3 9.585 9.585v462.829c0 5.286-4.3 9.586-9.585 9.586h-132.728c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h132.729c13.557 0 24.585-11.029 24.585-24.586v-462.829c0-13.556-11.029-24.585-24.585-24.585zm-420.598 411.787h-44.23v-25.777h44.23zm-18.786-77.161h-25.444v-25.776h25.444zm0-77.16h-25.444v-66.552h25.444zm0-117.936h-25.444v-25.445h25.444zm244.649 115.465c0 .541-.44.981-.982.981h-12.977c-.541 0-.981-.44-.981-.981v-239.995h14.94z" />
                                    <path d="m158.96 278.991c8.081 0 14.655-6.574 14.655-14.655v-22.134c0-8.071 2.521-15.778 7.289-22.289l13.296-18.156c4.554-6.218 5.217-14.351 1.73-21.224-3.486-6.873-10.438-11.143-18.146-11.143h-43.077c-11.219 0-20.346 9.127-20.346 20.346v74.6c0 8.081 6.574 14.655 14.655 14.655zm-29.598-89.256c0-2.948 2.398-5.346 5.346-5.346h43.077c2.963 0 4.321 2.047 4.768 2.928s1.296 3.186-.454 5.577l-13.296 18.156c-6.665 9.1-10.188 19.872-10.188 31.152v21.789h-29.253z" />
                                    <path d="m386.164 201.74c0 4.142 3.357 7.5 7.5 7.5h5.583c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-5.583c-4.143 0-7.5 3.358-7.5 7.5z" />
                                    <path d="m434.147 209.24c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-5.584c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m463.463 209.24h5.584c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-5.584c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m413.905 246.012h4.813c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-4.813c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m443.991 246.012h4.813c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-4.813c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m112.999 69.68c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-7.522c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m160.019 54.68h-7.523c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h7.523c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z" />
                                    <path d="m207.04 69.68c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-7.523c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m139.233 99.085h-6.485c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h6.485c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z" />
                                    <path d="m173.282 114.085h6.486c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-6.486c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m123.66 394.893c14.162 0 25.684-11.522 25.684-25.685s-11.521-25.684-25.684-25.684-25.684 11.521-25.684 25.684 11.522 25.685 25.684 25.685zm0-36.368c5.891 0 10.684 4.793 10.684 10.684 0 5.892-4.793 10.685-10.684 10.685s-10.684-4.793-10.684-10.685c0-5.891 4.793-10.684 10.684-10.684z" />
                                    <path d="m282.374 369.208c0-14.162-11.521-25.684-25.684-25.684s-25.685 11.521-25.685 25.684 11.522 25.685 25.685 25.685 25.684-11.522 25.684-25.685zm-36.368 0c0-5.891 4.793-10.684 10.685-10.684 5.891 0 10.684 4.793 10.684 10.684 0 5.892-4.793 10.685-10.684 10.685-5.892 0-10.685-4.793-10.685-10.685z" />
                                    <path d="m328.822 442.386h-6.745v-6.266c0-6.801-5.533-12.334-12.334-12.334h-100.287v-54.578c0-1.943-.755-3.812-2.104-5.21l-24.048-24.902v-30.246h25.114c8.89 0 16.122-7.232 16.122-16.122v-137.076c0-8.89-7.232-16.122-16.122-16.122h-104.32c-8.891 0-16.123 7.232-16.123 16.122v79.837c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-79.837c0-.619.504-1.122 1.123-1.122h104.319c.619 0 1.122.503 1.122 1.122v137.076c0 .619-.503 1.122-1.122 1.122h-104.319c-.619 0-1.123-.503-1.123-1.122v-27.252c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v27.252c0 8.89 7.232 16.122 16.123 16.122h64.205v33.276c0 1.943.755 3.812 2.104 5.21l24.048 24.902v51.548h-69.9c-6.802 0-12.335 5.533-12.335 12.334v6.266h-6.744c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h6.744v6.265c0 6.801 5.533 12.334 12.335 12.334h185.188c6.801 0 12.334-5.533 12.334-12.334v-6.265h6.745c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5zm-21.745 18.599h-179.857v-22.198h179.856v22.198z" />
                                    <path d="m351.443 411.292c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-2.192h9.582v2.191c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-2.191h9.582v2.191c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-2.191h10.254c7.052 0 12.789-5.736 12.789-12.788v-10.255h2.19c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-2.19v-9.582h2.19c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-2.19v-9.581h2.19c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-2.19v-10.255c0-7.052-5.737-12.789-12.789-12.789h-10.254v-2.19c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v2.19h-9.582v-2.19c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v2.19h-9.582v-2.19c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v2.19h-10.255c-7.052 0-12.788 5.737-12.788 12.789v10.255h-2.19c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h2.19v9.581h-2.19c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h2.19v9.582h-2.19c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h2.19v10.255c0 7.052 5.736 12.788 12.788 12.788h10.255zm-8.043-97.442h80.25v80.25h-80.25z" />
                                    <path d="m364.688 376.838c4.143 0 7.5-3.357 7.5-7.5v-30.727c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v30.727c0 4.143 3.358 7.5 7.5 7.5z" />
                                    <path d="m402.362 376.838c4.143 0 7.5-3.357 7.5-7.5v-30.727c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v30.727c0 4.143 3.357 7.5 7.5 7.5z" />
                                    <path d="m477.342 52.695c0-6.664-5.421-12.085-12.085-12.085h-67.804c-6.664 0-12.085 5.421-12.085 12.085v18.969c0 6.664 5.421 12.084 12.085 12.084h67.804c6.664 0 12.085-5.421 12.085-12.084zm-15 16.054h-61.974v-13.139h61.974z" />
                                    <path d="m431.355 168.465c19.701 0 35.729-16.028 35.729-35.729s-16.028-35.729-35.729-35.729-35.729 16.028-35.729 35.729 16.028 35.729 35.729 35.729zm0-56.459c11.431 0 20.729 9.299 20.729 20.729s-9.299 20.729-20.729 20.729-20.729-9.299-20.729-20.729 9.299-20.729 20.729-20.729z" />
                                    <path d="m377.267 461.939c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h58.729c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5z" />
                                </g>
                            </svg>
                        </div>
                        <label for="motherboard" class="radio-tile-label mt-2">Motherboard</label>
                    </div>
                </div>
                <div class="input-container">
                    <input id="hard-drive" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                 x="0px" y="0px"
                                 viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;"
                                 xml:space="preserve">
<g>
                            <g>
                            <path d="M400,0H80C66.745,0,56,10.745,56,24v432c0,13.255,10.745,24,24,24h320c13.255,0,24-10.745,24-24V24
			C424,10.745,413.255,0,400,0z M408,456c0,4.418-3.582,8-8,8H80c-4.418,0-8-3.582-8-8V24c0-4.418,3.582-8,8-8h320
			c4.418,0,8,3.582,8,8V456z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M240,88c-83.921-0.025-151.972,67.986-151.997,151.907c-0.013,45.784,20.617,89.133,56.157,117.997l-13.816,13.808
			c-9.373,9.373-9.373,24.571,0,33.944c9.373,9.373,24.571,9.373,33.944,0l23.2-23.2c16.796,6.284,34.579,9.516,52.512,9.544
			c83.947,0,152-68.053,152-152S323.947,88,240,88z M152.976,394.344c-3.126,3.126-8.194,3.126-11.32,0
			c-3.126-3.126-3.126-8.194,0-11.32l67.888-67.872c3.025-3.221,8.087-3.38,11.308-0.355c3.221,3.025,3.38,8.087,0.355,11.308
			c-0.116,0.123-0.236,0.243-0.359,0.359L152.976,394.344z M346.509,324.637C320.705,357.116,281.481,376.031,240,376
			c-13.562,0.002-27.048-2.042-40-6.064l32.168-32.16c9.373-9.372,9.375-24.568,0.003-33.941c-0.001-0.001-0.002-0.002-0.003-0.003
			c-9.499-9.065-24.445-9.065-33.944,0l-42.664,42.672c-58.768-46.691-68.557-132.182-21.867-190.949
			c46.691-58.767,132.182-68.557,190.949-21.867S393.2,265.87,346.509,324.637z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M104,24c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24S117.255,24,104,24z M104,56c-4.418,0-8-3.582-8-8
			s3.582-8,8-8s8,3.582,8,8S108.418,56,104,56z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M376,24c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24S389.255,24,376,24z M376,56c-4.418,0-8-3.582-8-8
			s3.582-8,8-8s8,3.582,8,8S380.418,56,376,56z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M376,408c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24S389.255,408,376,408z M376,440c-4.418,0-8-3.582-8-8
			s3.582-8,8-8s8,3.582,8,8S380.418,440,376,440z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M104,408c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24S117.255,408,104,408z M104,440c-4.418,0-8-3.582-8-8
			s3.582-8,8-8s8,3.582,8,8S108.418,440,104,440z" />

	</g>
</g>
                            <g>
                            <g>
                            <path d="M240,200c-22.091,0-40,17.909-40,40s17.909,40,40,40c22.091,0,40-17.909,40-40C279.974,217.92,262.08,200.026,240,200z
			 M240,264c-13.255,0-24-10.745-24-24s10.745-24,24-24s24,10.745,24,24S253.255,264,240,264z" />

	</g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
                            <g>
</g>
</svg>
                        </div>
                        <label for="hard-drive" class="radio-tile-label mt-2">HDD</label>
                    </div>
                </div>
                <div class="input-container">
                    <input id="power-supply" class="radio-button" type="radio" name="part" />
                    <div class="radio-tile">
                        <div class="icon">
                            <svg id="Capa_1" enable-background="new 0 0 512 512" height="512"
                                 viewBox="0 0 512 512"
                                 width="512" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <path d="m252.78 209.524c-2.93-2.929-7.678-2.929-10.607 0l-10.191 10.191-9.866-9.866c-1.407-1.407-3.314-2.197-5.304-2.197h-129.115c-1.989 0-3.896.79-5.304 2.197l-9.866 9.866-10.191-10.191c-2.93-2.929-7.678-2.929-10.607 0s-2.929 7.678 0 10.606l10.191 10.191-9.866 9.866c-1.406 1.406-2.196 3.314-2.196 5.303v64.043c0 4.143 3.357 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-60.937l7.669-7.669 22.866 22.866c-10.292 12.629-16.478 28.73-16.478 46.254s6.185 33.626 16.478 46.254l-22.866 22.866-7.669-7.669v-31.979c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v35.085c0 1.989.79 3.896 2.196 5.304l9.866 9.866-10.191 10.191c-2.929 2.93-2.929 7.678 0 10.607 1.465 1.464 3.384 2.196 5.304 2.196 1.919 0 3.839-.732 5.304-2.196l10.191-10.191 9.866 9.866c1.407 1.406 3.314 2.196 5.304 2.196h129.115c1.989 0 3.896-.79 5.304-2.196l9.866-9.866 10.191 10.191c1.465 1.464 3.385 2.196 5.304 2.196s3.839-.732 5.304-2.196c2.929-2.93 2.929-7.678 0-10.607l-10.191-10.191 9.866-9.866c1.406-1.407 2.196-3.314 2.196-5.304v-129.114c0-1.989-.79-3.897-2.196-5.303l-9.866-9.866 10.191-10.191c2.927-2.929 2.927-7.678-.002-10.606zm-161.976 13.128h122.902l7.669 7.669-22.866 22.866c-12.629-10.292-28.73-16.478-46.254-16.478s-33.625 6.185-46.254 16.478l-22.866-22.866zm36.906 87.396c0-4.039.987-7.85 2.723-11.215l11.215 11.215-11.215 11.215c-1.736-3.364-2.723-7.175-2.723-11.215zm49.09 0c0 4.039-.987 7.851-2.723 11.215l-11.215-11.215 11.215-11.215c1.736 3.365 2.723 7.176 2.723 11.215zm-13.331 21.822c-3.364 1.736-7.175 2.723-11.215 2.723s-7.85-.987-11.215-2.723l11.215-11.215zm-11.214-32.429-11.215-11.215c3.364-1.736 7.175-2.723 11.215-2.723s7.851.987 11.215 2.723zm22.141-22.141c-6.322-4.288-13.944-6.797-22.142-6.797s-15.82 2.508-22.142 6.797l-13.438-13.438c9.855-7.61 22.194-12.152 35.579-12.152s25.724 4.543 35.579 12.152zm-44.282 65.497c6.322 4.288 13.944 6.796 22.141 6.796s15.819-2.508 22.141-6.796l13.438 13.438c-9.855 7.61-22.193 12.152-35.579 12.152s-25.724-4.543-35.579-12.152zm54.889-10.607c4.288-6.322 6.796-13.944 6.796-22.141s-2.508-15.819-6.796-22.141l13.438-13.438c7.61 9.855 12.152 22.193 12.152 35.579s-4.543 25.724-12.153 35.579zm-91.087-22.142c0-13.386 4.543-25.724 12.152-35.579l13.438 13.438c-4.288 6.322-6.796 13.944-6.796 22.141s2.508 15.82 6.796 22.141l-13.438 13.438c-7.609-9.855-12.152-22.193-12.152-35.579zm119.79 87.397h-122.902l-7.669-7.669 22.866-22.866c12.629 10.292 28.73 16.477 46.254 16.477s33.625-6.185 46.254-16.477l22.866 22.866zm25.945-148.848v122.902l-7.669 7.669-22.866-22.866c10.292-12.629 16.478-28.73 16.478-46.254 0-17.523-6.185-33.625-16.478-46.254l22.866-22.866z" />
                                    <path d="m38.078 174.95c0-4.142-3.357-7.472-7.5-7.472s-7.5 3.386-7.5 7.528 3.357 7.5 7.5 7.5 7.5-3.358 7.5-7.5z" />
                                    <path d="m30.578 437.617c-4.143 0-7.5 3.387-7.5 7.529s3.357 7.5 7.5 7.5 7.5-3.357 7.5-7.5v-.058c0-4.141-3.357-7.471-7.5-7.471z" />
                                    <path d="m488.923 174.95c0-4.142-3.357-7.472-7.5-7.472s-7.5 3.386-7.5 7.528 3.357 7.5 7.5 7.5 7.5-3.358 7.5-7.5z" />
                                    <path d="m481.423 437.617c-4.143 0-7.5 3.387-7.5 7.529s3.357 7.5 7.5 7.5 7.5-3.357 7.5-7.5v-.058c0-4.141-3.358-7.471-7.5-7.471z" />
                                    <path d="m459.911 246.583c0-4.857-2.096-9.479-5.749-12.681l-27.843-24.392c-1.368-1.198-3.124-1.858-4.942-1.858h-92.087c-1.818 0-3.574.661-4.942 1.859l-27.842 24.392c-3.654 3.201-5.749 7.823-5.749 12.681s2.095 9.48 5.749 12.682l27.842 24.392c1.368 1.198 3.124 1.858 4.942 1.858h92.087c1.818 0 3.574-.66 4.942-1.858l27.844-24.393c3.652-3.202 5.748-7.824 5.748-12.682zm-123.121-23.931h77.087v47.863h-77.087zm-31.033 23.931c0-.384.109-.939.634-1.398l15.399-13.491v29.78l-15.399-13.491c-.525-.46-.634-1.015-.634-1.4zm138.52 1.399-15.4 13.492v-29.78l15.399 13.491c.524.459.635 1.014.635 1.399s-.11.939-.634 1.398z" />
                                    <path d="m355.945 235.185c-4.143 0-7.5 3.358-7.5 7.5v7.798c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-7.798c0-4.142-3.357-7.5-7.5-7.5z" />
                                    <path d="m394.723 235.185c-4.143 0-7.5 3.358-7.5 7.5v7.798c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-7.798c0-4.142-3.358-7.5-7.5-7.5z" />
                                    <path d="m339.153 420.627h72.361c4.143 0 7.5-3.357 7.5-7.5v-37.347c0-4.143-3.357-7.5-7.5-7.5h-72.361c-4.143 0-7.5 3.357-7.5 7.5v37.347c0 4.143 3.358 7.5 7.5 7.5zm64.862-15h-21.181v-22.347h21.181zm-57.362-22.346h21.181v22.347h-21.181z" />
                                    <path d="m336.023 324.611c0-4.143-3.357-7.5-7.5-7.5h-3.639c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h3.639c4.143 0 7.5-3.358 7.5-7.5z" />
                                    <path d="m382.153 332.111c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-13.639c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m425.783 332.111c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-3.639c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m333.999 83.502c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-155.997c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m136.244 68.502h-11.644c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h11.645c4.143 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z" />
                                    <path d="m387.401 83.502c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-11.645c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z" />
                                    <path d="m504.5 405.633c4.143 0 7.5-3.357 7.5-7.5v-235.42c0-9.994-7.978-18.14-17.896-18.453l-45.539-86.611c-6.978-13.271-20.626-21.516-35.62-21.516h-245.697c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h245.696c9.405 0 17.967 5.171 22.343 13.496l41.853 79.601h-442.28l41.852-79.601c4.377-8.324 12.938-13.496 22.343-13.496h38.206c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-38.205c-14.993 0-28.642 8.244-35.62 21.515l-45.539 86.612c-9.919.313-17.897 8.459-17.897 18.453v294.671c0 10.191 8.291 18.482 18.482 18.482h475.035c10.191 0 18.482-8.291 18.482-18.482v-29.264c0-4.143-3.357-7.5-7.5-7.5s-7.5 3.357-7.5 7.5v29.264c0 1.92-1.562 3.482-3.482 3.482h-475.035c-1.92 0-3.482-1.562-3.482-3.482v-294.671c0-1.92 1.562-3.482 3.482-3.482h475.035c1.92 0 3.482 1.562 3.482 3.482v235.42c.001 4.143 3.358 7.5 7.501 7.5z" />
                                </g>
                            </svg>
                        </div>
                        <label for="power-supply" class="radio-tile-label mt-2">Power Supply</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="main-form" class="mt-3" method="post">
        <div id="processor-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="processor-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="processor-price-slider"
                       name="processorPrice">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="processor-cores-slider">Cores</label>
                </div>
                <input type="text" class="form-control slider" id="processor-cores-slider"
                       name="processorCores">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="processor-clockspeed-slider">Clockspeed (MHz)</label>
                </div>
                <input type="text" class="form-control slider" id="processor-clockspeed-slider"
                       name="processorClockspeed">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="processor-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="processor-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
        <div id="gpu-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="gpu-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="gpu-price-slider"
                       name="gpuPrice">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="gpu-memory-slider">Memory (MB)</label>
                </div>
                <input type="text" class="form-control slider" id="gpu-memory-slider"
                       name="gpuMemory">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="gpu-clockspeed-slider">Clockspeed (MHz)</label>
                </div>
                <input type="text" class="form-control slider" id="gpu-clockspeed-slider"
                       name="gpuClockspeed">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="gpu-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="gpu-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
        <div id="ram-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="ram-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="ram-price-slider"
                       name="ramPrice">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="ram-memory-slider">Memory (MB)</label>
                </div>
                <input type="text" class="form-control slider" id="ram-memory-slider"
                       name="ramMemory">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="ram-speed-slider">Speed</label>
                </div>
                <input type="text" class="form-control slider" id="ram-speed-slider"
                       name="ramSpeed">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="ram-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="ram-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
        <div id="motherboard-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="motherboard-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="motherboard-price-slider"
                       name="motherboardPrice">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="motherboard-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="motherboard-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
        <div id="hard-drive-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="hard-drive-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="hard-drive-price-slider"
                       name="hardDrivePrice">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="hard-drive-capacity-slider">Capacity (GB)</label>
                </div>
                <input type="text" class="form-control slider" id="hard-drive-capacity-slider"
                       name="hardDriveCapacity">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="hard-drive-speed-slider">Speed</label>
                </div>
                <input type="text" class="form-control slider" id="hard-drive-speed-slider"
                       name="hardDriveSpeed">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="hard-drive-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="hard-drive-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
        <div id="power-supply-preferences" class="d-none preferences">
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="power-supply-price-slider">Price ($)</label>
                </div>
                <input type="text" class="form-control slider" id="power-supply-price-slider"
                       name="powerSupplyPrice">
            </div>
            <div class="form-group font-weight-bold text-neon-dark w-45 mx-auto mt-3">
                <div class="d-flex justify-content-center">
                    <label for="power-supply-wattage-slider">Wattage</label>
                </div>
                <input type="text" class="form-control slider" id="power-supply-wattage-slider"
                       name="powerSupplySupportedElectricalPowerConsumption">
            </div>
            <hr class="bg-neon-dark hr-2 mt-4" />
            <div class="button-holder d-flex justify-content-center">
                <button type="button" id="power-supply-lock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder lock-button">
                    Lock
                </button>
                <button type="button" id="power-supply-unlock-button"
                        class="btn bg-neon-dark text-white font-weight-bolder unlock-button d-none">
                    Unlock
                </button>
            </div>
        </div>
    </form>
    <script>
                (function () {
                    function createProcessorSliders() {
                        const priceSliderId = 'processor-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        const coresSliderId = 'processor-cores-slider';
                        const coresValue = Number(document.getElementById(coresSliderId).value);
                        const coresResult = new rSlider({
                            target: coresSliderId,
                            values: Array.from({length: 32}, (_, i) => i + 1),
                            step: 1,
                            labels: false,
                        });
                        coresResult.setValues(coresValue);

                        const clockspeedSliderId = 'processor-clockspeed-slider';
                        const clockspeedValue = document.getElementById(clockspeedSliderId).value.split(',').map(x => Number(x));
                        const clockspeedResult = new rSlider({
                            target: clockspeedSliderId,
                            values: {min: 1000, max: 5000},
                            step: 50,
                            range: true,
                            labels: false,
                        });
                        clockspeedResult.setValues(...clockspeedValue);

                        return [priceResult, coresResult, clockspeedResult];
                    }

                    function createGpuSliders () {
                        const priceSliderId = 'gpu-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        const memorySliderId = 'gpu-memory-slider';
                        const memoryValue = Number(document.getElementById(memorySliderId).value);
                        const memoryResult = new rSlider({
                            target: memorySliderId,
                            values: {min: 100, max: 40000},
                            step: 100,
                            labels: false,
                        });
                        memoryResult.setValues(memoryValue);

                        const clockspeedSliderId = 'gpu-clockspeed-slider';
                        const clockspeedValue = document.getElementById(clockspeedSliderId).value.split(',').map(x => Number(x));
                        const clockspeedResult = new rSlider({
                            target: clockspeedSliderId,
                            values: {min: 100, max: 2000},
                            step: 50,
                            range: true,
                            labels: false,
                        });
                        clockspeedResult.setValues(...clockspeedValue);

                        return [priceResult, memoryResult, clockspeedResult];
                    }

                    function createRamSliders () {
                        const priceSliderId = 'ram-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        const memorySliderId = 'ram-memory-slider';
                        const memoryValue = Number(document.getElementById(memorySliderId).value);
                        const memoryResult = new rSlider({
                            target: memorySliderId,
                            values: {min: 1000, max: 40000},
                            step: 100,
                            labels: false,
                        });
                        memoryResult.setValues(memoryValue);

                        const speedSliderId = 'ram-speed-slider';
                        const speedValue = document.getElementById(speedSliderId).value.split(',').map(x => Number(x));
                        const speedResult = new rSlider({
                            target: speedSliderId,
                            values: {min: 500, max: 5000},
                            step: 50,
                            range: true,
                            labels: false,
                        });
                        speedResult.setValues(...speedValue);

                        return [priceResult, memoryResult, speedResult];
                    }

                    function createMotherboardSliders() {
                        const priceSliderId = 'motherboard-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        return[priceResult];
                    }

                    function createHardDriveSliders () {
                        const priceSliderId = 'hard-drive-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        const capacitySliderId = 'hard-drive-capacity-slider';
                        const capacityValue = Number(document.getElementById(capacitySliderId).value);
                        const capacityResult = new rSlider({
                            target: capacitySliderId,
                            values: {min: 100, max: 10000},
                            step: 100,
                            labels: false,
                        });
                        capacityResult.setValues(capacityValue);

                        const speedSliderId = 'hard-drive-speed-slider';
                        const speedValue = document.getElementById(speedSliderId).value.split(',').map(x => Number(x));
                        const speedResult = new rSlider({
                            target: speedSliderId,
                            values: {min: 500, max: 5000},
                            step: 50,
                            range: true,
                            labels: false,
                        });
                        speedResult.setValues(...speedValue);

                        return [priceResult, capacityResult, speedResult];
                    }

                    function createPowerSupplySliders() {
                        const priceSliderId = 'power-supply-price-slider';
                        const priceValue = Number(document.getElementById(priceSliderId).value);
                        const priceResult = new rSlider({
                            target: priceSliderId,
                            values: {min: 100, max: 10000},
                            step: 50,
                            labels: false,
                        });
                        priceResult.setValues(priceValue);

                        const wattageSliderId = 'power-supply-wattage-slider';
                        const wattageValue = Number(document.getElementById(wattageSliderId).value);
                        const wattageResult = new rSlider({
                            target: wattageSliderId,
                            values: {min: 200, max: 2000},
                            step: 50,
                            labels: false,
                        });
                        wattageResult.setValues(wattageValue);

                        return[priceResult, wattageResult];
                    }

                    const allSliders = {
                        'processor': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createProcessorSliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                        'gpu': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createGpuSliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                        'ram': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createRamSliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                        'motherboard': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createMotherboardSliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                        'hard-drive': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createHardDriveSliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                        'power-supply': {
                            value: [],
                            isLocked: false,
                            create: function() {
                                this.value = createPowerSupplySliders();
                                this.value.forEach(slider => slider.disabled(this.isLocked));
                            },
                            destroy: function() {
                                this.value.forEach(slider => slider.destroy());
                                this.value = [];
                            },
                        },
                    };

                    const lockButtons = document.querySelectorAll('.lock-button');
                    const unlockButtons = document.querySelectorAll('.unlock-button');

                    [...lockButtons].forEach(lockButton => lockButton.addEventListener('click', function (ev) {
                        const lockButtonId = ev.target.getAttribute('id');
                        const unlockButtonId = lockButtonId.replaceAll('lock', 'unlock');

                        const lockedPart = lockButtonId.replaceAll('-lock-button', '');
                        document.getElementById(lockedPart).parentElement.classList.add('locked-part');

                        allSliders[lockedPart].value.forEach(slider => slider.disabled(true));
                        allSliders[lockedPart].isLocked = true;

                        if (Object.keys(allSliders).map(key => allSliders[key].isLocked).filter(isLocked => isLocked).length === 6) {
                            document.getElementById('main-form').submit();
                        }

                        document.getElementById(lockButtonId).classList.add('d-none');
                        document.getElementById(unlockButtonId).classList.remove('d-none');
                    }));

                    [...unlockButtons].forEach(lockButton => lockButton.addEventListener('click', function (ev) {
                        const unlockButtonId = ev.target.getAttribute('id');
                        const lockButtonId = unlockButtonId.replaceAll('unlock', 'lock');

                        const unlockedPart = unlockButtonId.replaceAll('-unlock-button', '');
                        document.getElementById(unlockedPart).parentElement.classList.remove('locked-part');

                        allSliders[unlockedPart].value.forEach(slider => slider.disabled(false));
                        allSliders[unlockedPart].isLocked = false;

                        document.getElementById(lockButtonId).classList.remove('d-none');
                        document.getElementById(unlockButtonId).classList.add('d-none');
                    }));

                    const selectionRadioButtons = document.querySelectorAll('.radio-button');

                    [...selectionRadioButtons].forEach(radioButton => radioButton.addEventListener('change', function (ev) {
                        const selectedPart = ev.target.getAttribute('id');

                        [...document.querySelectorAll('.preferences')].forEach(element => element.classList.add('d-none'));
                        Object.keys(allSliders).filter(key => key !== selectedPart).forEach(key => allSliders[key].destroy());
                        document.getElementById(`${selectedPart}-preferences`).classList.remove('d-none');
                        allSliders[selectedPart].create();
                    }));
                }());

    </script>
</div>