petities/petitions.eu

- title @petition.name

div.page.top
  section class=(@petition.image ? 'petition-intro-container' : 'petition-intro-container-noimage')
    div.petition-intro-image-container
      = image_tag(@petition.image.upload.url(:listing), class: 'petition-intro-image') if @petition.image
    div.petition-intro-info-container
      h1.petition-intro-info-title=@petition.name
      div.petition-intro-info-counter= t('show.signatures_count', display: number_with_delimiter(@petition.get_count), count: @petition.get_count)
      div.petition-intro-info-text.whitespace
        p= markdown @petition.description

      - if @petition.status == 'live'
        = link_to t('signatures.sign'), petition_path(@petition), class: "button"

      - if user_signed_in? && current_user.has_role?(:admin, @petition)
        = link_to t('edit.petition.edit_petition'), edit_petition_path(@petition), class: 'button button-aside'

div.page.signatures

  section.petition-signatures-wrapper
    h2.petition-section-title.left= t('signatures.title')

    / div.whitespace
    /   = form_tag  search_petition_signatures_path(@petition), remote: true do
    /     = hidden_field_tag 'page', @page
    /     = text_field_tag 'query', ''
    /     = submit_tag 'Search'

    div.petition-signatures-container
      - cache [@petition, @petition.get_count, 'signatures', @page, params[:signature_id].to_i, I18n.locale, (user_signed_in? && current_user.has_role?(:admin, @petition))] do
        = render partial: 'list_index'

      div.clearfix

    div.navigation-bar
      = paginate @signatures

  aside.petition-signatures-side
    div.petition-signatures-side-float
      - cache [@petition, 'total_signatures_graph', I18n.locale], expires_in: 5.minutes do
        - chart_data, chart_labels = @petition.redis_history_chart_json(200)

        javascript:
          $(document).ready(function(){
            var ctx = $("#chartContainer")[0].getContext("2d");
            var data = {
              labels: #{raw chart_labels},
              datasets: [{
                fillColor: "#96c79f",
                data: #{raw chart_data}
              }]
            };
            var myBarChart = new Chart(ctx).Bar(data, {
              showTooltips: true,
              animation: true,
              showScale: true,
              scaleShowGridLines : false,
              scaleFontSize: 8,
              barShowStroke : false,
              barValueSpacing: 1,
              tooltipFillColor: "#fff",
              tooltipFontColor: "#000",
            });
          });

      div.whitespace style="padding:5px; background-color: #bcf9c7;"
        canvas#chartContainer style="height:175px; width:100%;"

      div.side-article-container.whitespace
        h2.side-article-title= @petition.name
        div.side-article-text= markdown @petition.description

      div.social-bar-side
        div.social-bar-side-content
          - share_url = petition_share_url(@petition)
          - share_title = escape_javascript(@petition.name)

          a.share-button.facebook href="javascript:fbShare('#{share_url}', '#{share_title}');"
            = fa_stacked_icon "facebook inverse", base: "circle", class: "fa-2x"

          a.share-button.twitter href="javascript:twitterShare('#{share_url}', '#{share_title}');"
            = fa_stacked_icon "twitter inverse", base: "circle", class: "fa-2x"

          a.share-button.whatsapp.small-only href="whatsapp://send?text=#{share_title} #{share_url}"
            = fa_stacked_icon "whatsapp inverse", base: "circle", class: "fa-2x"

          a.share-button.linkedin href="javascript:lnShare('#{share_url}');"
            = fa_stacked_icon "linkedin inverse", base: "circle", class: "fa-2x"

          = mail_to nil, fa_stacked_icon("envelope inverse", base: "circle", class: "fa-2x"),
                class: "share-button email",
                subject: "Petities.nl: #{@petition.name}",
                body: share_url

          a.share-button.link href="#{share_url}"
            = fa_stacked_icon "link inverse", base: "circle", class: "fa-2x"