{% extends 'vacancy_mgr/base.html' %}
{% load static %}
{% load humanize %}

    {% block head_title %}オーナー一覧{% endblock %}
    {% block head %}
        <link rel="stylesheet" href="{% static 'owner/css/style.css' %}">
    {% endblock %}

    {% block page_top %}{% endblock %}

    {% block header %}{% endblock %}

    {% block h1_title %}【オーナー一覧】{% endblock %}

    {% block contents %}
        <div id="search-conditions-form">
            <form action="" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group row">
                    <div class="col col-2 col-form-label"><label class="float-right">オーナー名</label></div>
                    <div class="col-8">{{ form.owner_name }}</div>
                    <div class="col-2"></div>
                </div>
                <div class="form-group row">
                    <div class="col-2"></div>
                    <div class="col-4">
                        <input type="submit" value="検索" class="btn d-block mx-auto d-flex align-items-center btn-primary">
                    </div>
                    <div class="col-4">
                        <input type="submit" value="クリア" v-on:click="clearConditions($event)" class="btn d-block mx-auto d-flex align-items-center btn-secondary">
                    </div>
                    <div class="col-2"></div>
                </div>
            </form>
        </div>

        <div  id="data-list-header">
            <div class="row">
                <div id="link-add-item" class="col col-6 text-left">
                    <a href="{% url 'owner_create_owner' %}">オーナー追加</a>
                </div>
                <div id="link-change-list" class="col col-6 text-right">
                {% if all_owners %}
                    <a href="{% url 'owner_owner_list' %}">オーナー一覧</a>
                {% else %}
                    <a href="{% url 'owner_all_owner_list' %}">全オーナー一覧</a>
                {% endif %}
                </div>
            </div>
        </div>
        <div id="data-list">
        {% if owners %}
            <div class="row">
                <div class="col col-5 text-center">オーナー名</div>
                <div class="col col-1 text-center">法人</div>
                <div class="col col-4 text-center">法人オーナー名</div>
                <div class="col col-1 text-center">停止</div>
                <div class="col col-1 text-center">削除</div>
            </div>
            {% for item in owners %}
            <div class="row">
                <div class="col col-5"><a href="{% url 'owner_detail' item.idb64 %}" target="_blank" rel="noopener noreferrer">{{ item.owner_name }}</a></div>
                <div class="col col-1 text-center">{% if item.is_corporation %}○{% else %}－{% endif %}</div>
                <div class="col col-4 text-center">{{ item.corporation_owner_name | default_if_none:'' }}</div>
                <div class="col col-1 text-center">{% if item.is_stopped %}×{% else %}－{% endif %}</div>
                <div class="col col-1 text-center">{% if item.is_deleted %}×{% else %}－{% endif %}</div>
            </div>
            {% endfor %}
        {% else %}
            <div class="row">
                <div class="col col-12 text-center">該当するオーナーはありません。</div>
            </div>
        {% endif %}
        </div>
    {% endblock %}

    {% block footer %}{% endblock %}

    {% block page_bottom %}
        <script type="text/javascript" src="{% static 'owner/js/search_name.js' %}"></script>
        <script type="text/javascript">
            var searchApp = createSearchNameVue(
                "{{ default_owner_name | default_if_none:'' }}"
            );
        </script>
    {% endblock %}
