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

    {% block head_title %}駐車場一覧：{{ building.building_name | default_if_none:'' }}{% endblock %}
    {% block head %}
        <link rel="stylesheet" href="{% static 'building/css/style.css' %}">
    {% endblock %}

    {% block header %}{% endblock %}

    {% block h1_title %}
        <div id="garage-list-title">
            <div class="row">
                <div class="col col-12 garage-list-name">
                    {{ building.building_name | default_if_none:'' }} 駐車場一覧
                </div>
            </div>
        </div>
    {% endblock %}

    {% block contents %}
        <div id="garage-list">
        {% if building.garages %}
            <div class="row title">
                <div class="col col-2">名称</div>
                <div class="col col-4">月額・手数料等</div>
                <div class="col col-6">その他</div>
            </div>
        {% for garage in building.garages %}
            <div class="row garage">
                <div class="col col-2">
                    <div><span id="id_garage_{{ forloop.counter }}_name">{{ garage.garage_name | default_if_none:'---' }}</span></div>
                    {% if garage.garage_status_text %}<div class="small">状況: <span id="id_garage_{{ forloop.counter }}_status">{{ garage.garage_status_text }}</span></div>{% endif %}
                </div>
                <div class="col col-4">
                    <div class="small">月額: <span id="id_garage_{{ forloop.counter }}_fee">{{ garage.garage_fee_text | default_if_none:'---' }}</span></div>
                    {% if garage.garage_charge_text %}<div class="small">手数料: <span id="id_garage_{{ forloop.counter }}_charge">{{ garage.garage_charge_text }}</span></div>{% endif %}
                    {% if garage.garage_deposit_text %}<div class="small">保証金: <span id="id_garage_{{ forloop.counter }}_deposit">{{ garage.garage_deposit_text }}</span></div>{% endif %}
                    {% if garage.certification_fee_text %}<div class="small">車庫証明: <span id="id_garage_{{ forloop.counter }}_certification_fee">{{ garage.certification_fee_text }}</span></div>{% endif %}
                </div>
                <div class="col col-6">
                    {% if garage.allow_no_room_text %}<div class="small"><span id="id_garage_{{ forloop.counter }}_allow_no_room">{{ garage.allow_no_room_text }}</span></div>{% endif %}
                    {% if garage.garage_size_text %}<div class="small"><span id="id_garage_{{ forloop.counter }}_size">{{ garage.garage_size_text }}</span></div>{% endif %}
                    {% if garage.initial_cost_name1 and garage.initial_cost_text1 %}<div class="small"><span id="id_garage_{{ forloop.counter }}_initial_cost1">{{ garage.initial_cost_name1 }}: {{ garage.initial_cost_text1 }}</span></div>{% endif %}
                    {% if garage.initial_cost_name2 and garage.initial_cost_text2 %}<div class="small"><span id="id_garage_{{ forloop.counter }}_initial_cost2">{{ garage.initial_cost_name2 }}: {{ garage.initial_cost_text2 }}</span></div>{% endif %}
                    {% if garage.initial_cost_name3 and garage.initial_cost_text3 %}<div class="small"><span id="id_garage_{{ forloop.counter }}_initial_cost3">{{ garage.initial_cost_name3 }}: {{ garage.initial_cost_text3 }}</span></div>{% endif %}
                    {% if garage.comment %}<div class="small"><span id="id_garage_{{ forloop.counter }}_comment">{{ garage.comment | linebreaksbr }}</span></div>{% endif %}
                    {% if garage.note %}<div class="annotation"><span id="id_garage_{{ forloop.counter }}_note">{{ garage.note | linebreaksbr }}</span></div>{% endif %}
                </div>
            </div>
        {% endfor %}
        {% else %}
            <p class="no-garages">募集中の駐車場がありません。</p>
        {% endif %}
        </div>

        <div class="row commands">
            <div class="col col-12">
                <div class="text-center">
                    <input type="button" value="閉じる" onclick="window.close();" class="btn d-block mx-auto d-flex align-items-center btn-secondary">
                </div>
            </div>
        </div>

    {% endblock %}

    {% block footer %}{% endblock %}
