%section.content
  .container{style: "margin-top:30px"}
    .col-md-4
      .box.box-body.box-profile{style: "border-top-color: #{@balloon[:user][:color]}"}
        %h4.text-center
          Auteur du ballon
        = avatar_tag @balloon[:user], :large, {class: "profile-user-img img-responsive img-circle"}

        %h3.profile-username.text-center
          =@balloon[:user][:display_name]
        %p.text-muted.text-center
          =@balloon[:user][:about_me]
      .box.box-body{style: "border-top-color: #{@balloon[:user][:color]}"}
        %h4.text-center
          Emplacement du ballon
        %div{:style => "width: 100%;"}
          #map{:style => "width: 100%; height: 300px;"}

    .col-md-8
      .box{style: "border-top-color: #{@balloon[:user][:color]}"}
        .post
          .user-block{style: "padding:20px"}
            = avatar_tag @balloon[:user], :medium, {class: "img-circle img-bordered-sm"}

            %span.username
              = @balloon[:user][:display_name]

            %span.description
              Créé il y a
              =time_ago_in_words(DateTime.parse(@balloon[:created_at]))
              \/ Expire dans
              =time_ago_in_words(DateTime.parse(@balloon[:expire_at]))

            -if @balloon[:category]
              %img{style:"position:absolute; right:20px; top:20px;",src: @balloon[:category][:flat_icon_url]}

          %p{style:"font-size:18px; padding-left:30px;padding-right:30px;"}
            = @balloon[:content]


          -if @balloon[:image]
            .image-content{style:"padding:30px"}
              %img#balloon_image{style:"width:100%", :alt => "balloon image", :src =>  @balloon[:image][:original]}/

          .balloon-footer{style:"position:relative;display:block;height:40px;"}
            -if @balloon[:likes_count] == 1
              .likes{style:"font-size:20px;position:absolute;bottom:20px;right:20px;"}
                %i.fa.fa-heart{style:"color:#d9534f"}
                = "Une personne aime ce ballon"
            -elsif @balloon[:likes_count] > 1
              .likes{style:"font-size:20px;position:absolute;bottom:20px;right:20px;"}
                %i.fa.fa-heart{style:"color:#d9534f"}
                = "#{@balloon[:likes_count] } personnes aiment ce ballon"

      = "#{@comments.count} Commentaire(s)"
      -if @comments.count > 0
        .box
          #chat-box.box-body.chat
            - @comments.each do |comment|
              .item
                = avatar_tag comment[:user], :large, {style: "border-color:#{comment[:user][:color]}", class: "offline"}

                %p.message
                  %span.name
                    %small.text-muted.pull-right
                      %i.fa.fa-clock-o
                      =time_ago_in_words(DateTime.parse(comment[:created_at]))
                    = comment[:user][:display_name]
                  = comment[:content]

                -if comment[:image]
                  .image-content{style:"padding:30px"}
                    %img#balloon_image{style:"width:100%", :alt => "comment image", :src =>  comment[:image][:original]}/
          %a.btn.btn-primary{style:"width:100%;", href:"http://heylium.io"}
            Pour participer, téléchargez l'application Heylium sur iOS ou Android

:javascript


  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map',zoom:10}}, function(){
    var shape = {
      coords: [1, 1, 1, 20, 18, 20, 18, 1],
      type: 'poly'
    };

    markers = handler.addMarkers([
      {
        "lat": "#{@balloon[:location][:latitude]}",
        "lng": "#{@balloon[:location][:longitude]}",
        "shape": shape,
        "infowindow": "hello!"
      }
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(12)



  });



- content_for :javascript do
  %script{:src => "//maps.google.com/maps/api/js"}
  %script{:src => "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}
  %script{:src => "//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js", :type => "text/javascript"}

- content_for :header do
  / Schema.org markup for Google+
  %meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :itemprop => "name"}/
  %meta{:content => @balloon[:content].to_s.truncate(200), :itemprop => "description"}/
  -if @balloon[:image]
    %meta{:content => @balloon[:image][:large], :itemprop => "image"}/
  / Twitter Card data
  -if @balloon[:image]
    %meta{:content => "balloon_image", :name => "twitter:card"}/
    / Twitter summary card with large image must be at least 280x150px
    %meta{:content => @balloon[:image][:large], :name => "twitter:image:src"}/
  %meta{:content => "@publisher_handle", :name => "twitter:site"}/
  %meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :name => "twitter:title"}/
  %meta{:content => @balloon[:content].to_s.truncate(200), :name => "twitter:description"}/
  %meta{:content => @balloon[:user][:display_name], :name => "twitter:creator"}/
  / Open Graph data
  %meta{:content => "Ballon de #{@balloon[:user][:display_name]}", :property => "og:title"}/
  %meta{:content => "article", :property => "og:type"}/
  %meta{:content => "1675468199365503", :property => "fb:app_id"}
  -if @balloon[:image]
    %meta{:content => request.original_url, :property => "og:url"}/
  %meta{:content => @balloon[:image][:large], :property => "og:image"}/
  %meta{:content => @balloon[:content].to_s.truncate(200), :property => "og:description"}/
  %meta{:content => "Heylium Webapp", :property => "og:site_name"}/
  %meta{:content => DateTime.parse(@balloon[:created_at]), :property => "article:published_time"}/
  -# %meta{:content => "2013-09-16T19:08:47+01:00", :property => "article:modified_time"}/
  -# %meta{:content => "Article Section", :property => "article:section"}/
  -# %meta{:content => "Article Tag", :property => "article:tag"}/
  -# %meta{:content => "Facebook numberic ID", :property => "fb:admins"}/