<commit_before><template>
  <div class="pins">
    <section class="section">
      <div id="pins-container" class="container" v-if="blocks">
        <div
          v-masonry=""
          transition-duration="0.3s"
          item-selector=".grid-item"
          column-width=".grid-sizer"
          gutter=".gutter-sizer"
        >
          <template v-for="item in blocks">
            <div v-bind:key="item.id" v-masonry-tile class="grid">
              <div class="grid-sizer"></div>
              <div class="gutter-sizer"></div>
              <div class="pin-card grid-item">
                <img :src="item.url" alt="item.description">
                <div class="pin-footer">
                  <div class="description" v-show="item.description"><p>{{ item.description }}</p></div>
                  <div class="details">
                    <div class="is-pulled-left">
                      <img class="avatar" :src="item.avatar" alt="">
                    </div>
                    <div class="pin-info">
                      <span class="dim">pined by&nbsp;<span>{{ item.author }}</span>&nbsp;in&nbsp;
                      <template v-for="tag in item.tags">
                        <span v-bind:key="tag" class="pin-tag">
                          &nbsp;
                          <router-link to="/tags/">{{ tag }}</router-link>
                        </span>
                      </template>
                      </span>
                    </div>
                    <div class="is-clearfix"></div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import API from './api';
import pinHandler from './utils/PinHandler';

function createImageItem(pin) {
  const image = {};
  image.url = pinHandler.escapeUrl(pin.image.thumbnail.image);
  image.id = pin.id;
  image.description = pin.description;
  image.tags = pin.tags;
  image.author = pin.submitter.username;
  image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
  return image;
}

export default {
  name: 'pins',
  components: {},
  data() {
    return {
      blocks: [],
    };
  },
  methods: {
    buildBlocks(results) {
      const blocks = [];
      results.forEach(
        (pin) => {
          blocks.push(
            createImageItem(pin),
          );
        },
      );
      return blocks;
    },
  },
  created() {
    API.fetchPins(0).then(
      (resp) => {
        this.blocks = this.buildBlocks(resp.data.results);
      },
    );
  },
};
</script>

<style lang="scss" scoped>
/* grid */
.grid-sizer,
.grid-item { width: 240px; }
.grid-item {
  margin-bottom: 15px;
}
.gutter-sizer {
  width: 15px;
}
/* card */
$pin-footer-position-fix: -6px;
@mixin pin-detail-font-size{
  font-size: 12px;
}

@mixin description-font {
  @include pin-detail-font-size;
  font-family: 'Georgia', 'Times', 'Times New Roman', serif;
}

@mixin secondary-font {
  @include pin-detail-font-size;
  color: #999;
  font-weight: normal;
}

.pin-card{
  > img {
    border-radius: 3px 3px 0 0;
  }
  .avatar {
    height: 30px;
    width: 30px;
    border-radius: 3px;
  }
}
.pin-footer {
  position: relative;
  top: $pin-footer-position-fix;
  background-color: white;
  border-radius: 0 0 3px 3px ;
  box-shadow: 0 1px 0 #bbb;
  .description {
    @include description-font;
    padding: 8px;
    border-bottom: 1px solid #DDDDDD;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .details {
    @include secondary-font;
    padding: 10px;
    > .pin-info {
      line-height: 16px;
      width: 220px;
    }
    .pin-tag > a {
      font-weight: bold;
    }
  }
}

/*pin container size fit*/
/* Generated by python code:
/* def fn(x):
/*     gutter = 15
/*     image_width = 240
/*     border_width_of_parent = 24
/*     size = image_width * x + gutter * (x - 1)
/*     width = size + border_width_of_parent * 2
/*     print(template % (width, size))
/*
/* for i in range(1, 12):
/*     fn(i)<commit_msg>Feature: Add left-padding for pin-info<commit_after><template>
  <div class="pins">
    <section class="section">
      <div id="pins-container" class="container" v-if="blocks">
        <div
          v-masonry=""
          transition-duration="0.3s"
          item-selector=".grid-item"
          column-width=".grid-sizer"
          gutter=".gutter-sizer"
        >
          <template v-for="item in blocks">
            <div v-bind:key="item.id" v-masonry-tile class="grid">
              <div class="grid-sizer"></div>
              <div class="gutter-sizer"></div>
              <div class="pin-card grid-item">
                <img :src="item.url" alt="item.description">
                <div class="pin-footer">
                  <div class="description" v-show="item.description"><p>{{ item.description }}</p></div>
                  <div class="details">
                    <div class="is-pulled-left">
                      <img class="avatar" :src="item.avatar" alt="">
                    </div>
                    <div class="pin-info">
                      <span class="dim">pined by&nbsp;<span>{{ item.author }}</span>
                        <template v-if="item.tags.length > 0">
                          &nbsp;in&nbsp;
                          <template v-for="tag in item.tags">
                            <span v-bind:key="tag" class="pin-tag">
                              &nbsp;
                              <router-link to="/tags/">{{ tag }}</router-link>
                            </span>
                          </template>
                        </template>
                      </span>
                    </div>
                    <div class="is-clearfix"></div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import API from './api';
import pinHandler from './utils/PinHandler';

function createImageItem(pin) {
  const image = {};
  image.url = pinHandler.escapeUrl(pin.image.thumbnail.image);
  image.id = pin.id;
  image.description = pin.description;
  image.tags = pin.tags;
  image.author = pin.submitter.username;
  image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
  return image;
}

export default {
  name: 'pins',
  components: {},
  data() {
    return {
      blocks: [],
    };
  },
  methods: {
    buildBlocks(results) {
      const blocks = [];
      results.forEach(
        (pin) => {
          blocks.push(
            createImageItem(pin),
          );
        },
      );
      return blocks;
    },
  },
  created() {
    API.fetchPins(0).then(
      (resp) => {
        this.blocks = this.buildBlocks(resp.data.results);
      },
    );
  },
};
</script>

<style lang="scss" scoped>
/* grid */
.grid-sizer,
.grid-item { width: 240px; }
.grid-item {
  margin-bottom: 15px;
}
.gutter-sizer {
  width: 15px;
}
/* card */
$pin-footer-position-fix: -6px;
$avatar-width: 30px;
$avatar-height: 30px;

@mixin pin-detail-font-size{
  font-size: 12px;
}

@mixin description-font {
  @include pin-detail-font-size;
  font-family: 'Georgia', 'Times', 'Times New Roman', serif;
}

@mixin secondary-font {
  @include pin-detail-font-size;
  color: #999;
  font-weight: normal;
}

.pin-card{
  > img {
    border-radius: 3px 3px 0 0;
  }
  .avatar {
    height: $avatar-height;
    width: $avatar-width;
    border-radius: 3px;
  }
}
.pin-footer {
  position: relative;
  top: $pin-footer-position-fix;
  background-color: white;
  border-radius: 0 0 3px 3px ;
  box-shadow: 0 1px 0 #bbb;
  .description {
    @include description-font;
    padding: 8px;
    border-bottom: 1px solid #DDDDDD;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .details {
    @include secondary-font;
    padding: 10px;
    > .pin-info {
      line-height: 16px;
      width: 220px;
      padding-left: $avatar-width + 5px;
    }
    .pin-tag > a {
      font-weight: bold;
    }
  }
}

/*pin container size fit*/
/* Generated by python code:
/* def fn(x):
/*     gutter = 15
/*     image_width = 240
/*     border_width_of_parent = 24
/*     size = image_width * x + gutter * (x - 1)
/*     width = size + border_width_of_parent * 2
/*     print(template % (width, size))
/*
/* for i in range(1, 12):
/*     fn(i)
{'fraction_non_alphanumeric': 0.16149142788634457, 'fraction_numerical': 0.012948087759261479, 'mean_word_length': 1.7458854509545754, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 114, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2470622', 'n_tokens_mistral': 2853, 'n_tokens_neox': 2699, 'n_words': 551}