{% extends "base.html" %}

{% block title %}Follow Companies{% endblock %}

{% block content %}
<h2>Follow Companies</h2>
<div class="row">
    <div class="col-md-6">
        <div class="card shadow">
            <div class="card-body">
                <input type="text" id="companySearch" class="form-control mb-3" placeholder="Search company by name...">
                <div id="searchResults"></div>
                <hr>
                <h5>All Companies</h5>
                <ul class="list-group">
                    {% for comp in companies %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        {{ comp.name }}
                        {% if comp.id in existing_interests %}
                            <span class="badge bg-secondary">Following</span>
                        {% else %}
                            <form method="POST" style="display:inline;">
                                <input type="hidden" name="company_id" value="{{ comp.id }}">
                                <button type="submit" class="btn btn-sm btn-primary">Follow</button>
                            </form>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$('#companySearch').on('input', function() {
    var query = $(this).val();
    if(query.length > 1) {
        $.get('/job-seeker/company/search', { q: query }, function(data) {
            var html = '<div class="list-group">';
            data.forEach(function(c) {
                html += '<div class="list-group-item d-flex justify-content-between align-items-center">'+c.name+
                        '<form method="POST" style="display:inline;"><input type="hidden" name="company_id" value="'+c.id+'">'+
                        '<button type="submit" class="btn btn-sm btn-primary">Follow</button></form></div>';
            });
            html += '</div>';
            $('#searchResults').html(html);
        });
    } else {
        $('#searchResults').html('');
    }
});
</script>
{% endblock %}