<div id="map"></div>


  <main>
    <section class="info-card">
      <h2><%= @protected_area.name %></h2>

      <hr>
      <p><strong>Area of Outstanding Natural Beauty</strong>
      <a href="#">United Kingdom</a>, <a href="#">Europe</a> | Marine Area</p>
      <hr>

      <a href="#" class="btn">Download the WDPA dataset</a>
     </section>

    <div class="factsheet">
      <section>
        <h3>
          Official record
          <span><i class="fa fa-clock-o"></i> Last updated on <%= @protected_area.created_at.strftime('%e %B %Y') %></span>        </h3>
          <%= render 'official_record', protected_area: @protected_area %>
      </section>

      <section class="column-left">
        <h3>Wikipedia description</h3>
        <%= render 'wikipedia_box', wikipedia_article: @wikipedia_article %>
      </section>

      <section class="column-right">
        <h3>Images for this area</h3>
        <%= render 'photos_list', images: @protected_area.images %>
      </section>
    </div>
  </main>


<script>
  function initializeMap() {
    fitToBounds(<%= @protected_area.bounds.to_json %>);
  }

  $(document).ready(initializeMap);
  $(document).on('page:load', initializeMap);
</script>

<div id="map"></div>

<main>
  <section class="info-card">
    <h2><%= @protected_area.name %></h2>

    <hr>

    <p><strong>Area of Outstanding Natural Beauty</strong>
    <a href="#">United Kingdom</a>, <a href="#">Europe</a> | Marine Area</p>

    <hr>

    <a href="#" class="btn btn-primary">Download the WDPA dataset</a>
  </section>

  <div class="factsheet">
    <section>
      <h3>
        Official record
        <span><i class="fa fa-clock-o"></i> Last updated on <%= @protected_area.created_at.strftime('%e %B %Y') %></span>
      </h3>

      <%= render 'official_record', protected_area: @protected_area %>
    </section>

    <section class="column-left">
      <h3>Wikipedia description</h3>

      <%= render 'wikipedia_box', wikipedia_article: @wikipedia_article %>
    </section>

    <section class="column-right">
      <h3>Images for this area</h3>

      <%= render 'photos_list', images: @protected_area.images %>
    </section>
  </div>
</main>


<script>
  function initializeMap() {
    fitToBounds(<%= @protected_area.bounds.to_json %>);
  }

  $(document).ready(initializeMap);
  $(document).on('page:load', initializeMap);
</script>

Fix indentation of PA show view
Fix indentation of PA show view
