{% extends "base.html" %} {% block content %}

<div class="container mt-4" style="padding-top: 20px;">
  <div class="card" style="background-color: #f0f8ff; border: 1px solid #b0c4de; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);font-family: 'Roboto', sans-serif;">
    <div class="card-body custom-form">

      


      <div class="d-flex justify-content-between align-items-center">
        <h1 class="my-4">股票類型＆產業類別</h1>

        <!-- 搜尋欄位 -->
        <form class="d-flex" action="/search_stock" method="post">
            <input class="form-control me-2" type="search" name="search_query" placeholder="輸入股票代號或名稱" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">搜尋</button>
        </form>
    </div>

    <!-- 產業類別按鈕 -->
    <div class="d-flex flex-wrap gap-2">
        {% for category in industry_categories %}
        <form action="/industry_stocks" method="post">
            <input type="hidden" name="industry_category" value="{{ category }}">
            <button type="submit" class="btn btn-outline-dark ">{{ category }}</button>
        </form>
        {% endfor %}
    </div>




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

{% endblock %}