<?php
$members = new WP_Query(array(
    'post_type' => 'member',
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => 'ASC'
));

if ($members->have_posts()) :
?>
    <style>
        #members-dropdown-form {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        #members-dropdown {
            padding: 0em 1em;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #333;
            background-color: #fff;
            border: 1px solid #ccc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75em center;
            background-size: 1em;
            padding-right: 2em;
            font-family: inherit; /* ensure site font applies */
        }

        #members-dropdown option {
            color: #000;
            background: #fff;
            font-family: inherit; /* match site font */
            font-size: 0.9rem;
        }

        #go-to-member {
            color: var(--bricks-color-white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
          line-height: 1.7rem;
            align-items: center;
            border-width: 0;
            display: inline-flex;
            gap: 10px;
            justify-content: center;
            letter-spacing: 0.5px;
            padding: 0.5em 1em;
            text-align: center;
            background-color: #0097B2;
            cursor: pointer;
            transition: background-color 0.2s ease;
            font-family: inherit; /* match site font */
        }

        #go-to-member:hover {
            background-color: #00778b;
        }

        @media (min-width: 767px) {
            #members-dropdown {
                max-width: 250px;
            }
        }
    </style>

    <form id="members-dropdown-form" action="" method="get">
        <select id="members-dropdown" name="member">
            <option value="">Select a Member</option>
            <?php while ($members->have_posts()) : $members->the_post(); ?>
                <option value="<?php the_permalink(); ?>"><?php the_title(); ?></option>
            <?php endwhile; ?>
        </select>
        <button type="button" id="go-to-member">View Profile</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const button = document.getElementById('go-to-member');
            const dropdown = document.getElementById('members-dropdown');

            button.addEventListener('click', function() {
                const selectedUrl = dropdown.value;
                if (selectedUrl) {
                    window.location.href = selectedUrl;
                }
            });
        });
    </script>
<?php
else :
    echo 'No members found.';
endif;
wp_reset_postdata();
?>