<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main page</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <main id="mainPageMain">
        <section class="jumbotronSection">
            <h1>Welcome to our store!</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque labore perspiciatis ad reprehenderit magni, fugiat eligendi! Porro dignissimos rerum accusantium!</p>
        </section>
        <section class="searchSection">
            <form action="/search" method="post">
                <input type="text" name="searchTerm" placeholder="Search term">
                
                <h4>Search for:</h4>
                <div>
                    <label for="both">Users and goods</label>
                    <input type="radio" id="both" name="searchType" value="both" checked>

                    <br>

                    <label for="userOnly">Users only</label>
                    <input type="radio" id="userOnly" name="searchType" value="usersOnly">

                    <br>
                
                    <label for="goodsOnly">Goods only</label>
                    <input type="radio" id="goodsOnly" name="searchType" value="goodsOnly">
                </div>
                <br>

                <button type="submit">Search!</button>
            </form>
        </section>
        <section class="categoriesSection">
            <h3>You can choose from a wide range of categories:</h3>
            <div class="categories">
                {{#categories}}
                <a class="categoryCard" href="/category/{{.}}">
                    <img src="https://api.lorem.space/image?w=150&h=180&{{.}}" alt="{{.}}">
                    <p>
                        {{.}}
                    </p>
                </a>
                {{/categories}}
            </div>
        </section>
    </main>
</body>
</html>