<div id="neighborhood-details">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2 class="custom-header">{{ 'neighborhoods.headline.about_location'|trans({'%location%': location.title}) }}</h2>
</div>
</div>
{% if location.photos.count > 0 %}
<div class="col-xs-12 col-sm-7">
<div id="neighborhood-photo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for photo in location.photos %}
<li data-target="#neighborhood-photo" data-slide-to="{{ loop.index - 1 }}"{% if loop.index == 1 %} class="active"{% endif %}></li>
{% endfor %}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for photo in location.photos %}
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}">
<img src="{{ custom_vich_uploader_asset(photo.file, 'file')| thumbnail('neighborhood-slider') }}" alt="{{ photo.caption }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control carousel-control-prev" href="#neighborhood-photo" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-next" href="#neighborhood-photo" role="button" data-slide="next">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{% endif %}
<div class="col-xs-12 {% if location.photos.count > 0 %} col-sm-5 {% else %} col-sm-12 {% endif %}">
<div id="neighborhoodDescription">
{{ location.description|replace({" ": ''})|raw }}
</div>
{% if location.description|length > 1500 %}
<a href="javascript:void(0)" class="see-more"></a>
{% endif %}
</div>
</div>
</div>
</div><!-- end #neighborhood-details -->