<commit_before>{# {% include "devices/_ipad.twig" %} #}

{% set colors = [
  "silver",
  "black",
  "gold"
] %}

{% set orientations = [
  "portrait",
  "landscape"
] %}

{% set prefix = "c-bolt-" %}
{% set deviceName = device | default("ipad") %}
{% set color = color | default("black") %}
{% set orientation = orientation | default("portrait") %}

{% set attributes = create_attribute(attributes|default({})) %}

{# Defaults for a vanilla `Button` component #}
{% set componentName = deviceName ~ "-viewer" %}
{% set baseClass = prefix ~ componentName %}

{% if image %}
  {% set image = image | merge({
    sizes: "(min-width: 600px) 150vw, 100vw",
    zoom: true
  }) %}
{% endif %}

{% set classes = [
  baseClass,
  "marvel-device",
  color in colors ? baseClass ~ "--" ~ color : "",
  orientation in orientations ? baseClass ~ "--" ~ orientation : ""
] %}


<bolt-device-viewer>
  <div {{ attributes.addClass(classes | raw) }}>
    <div class="{{ baseClass ~ "__inner" }}">
      <div class="{{ baseClass ~ "__top-bar"}}"></div>
      <div class="{{ baseClass ~ "__sleep"}}"></div>
      <div class="{{ baseClass ~ "__volume"}}"></div>
      <div class="{{ baseClass ~ "__camera"}}"></div>
      <div class="{{ baseClass ~ "__speaker"}}"></div>

      <bolt-device-screen class="{{ baseClass ~ "__screen"}} c-bolt-device-viewer__screen js-device-viewer-screen">
        {% include "@bolt/_screen-tilt.twig" %}

        {% block device_viewer_image %}
          {% if image %}
            {% include "@bolt/image.twig" with image only %}
          {% endif %}
        {% endblock %}

        <div class="c-bolt-device-viewer__overlay">
          <bolt-icon name="search" size="xlarge" background="circle" class="c-bolt-device-viewer__overlay-icon" />
        </div>
      </bolt-device-screen>

      <div class="{{ baseClass ~ "__home"}}"></div>
      <div class="{{ baseClass ~ "__bottom-bar"}}"></div>

    </div>
  </div>
</bolt-device-viewer><commit_msg>Add magnify option to device viewer.<commit_after>{# {% include "devices/_ipad.twig" %} #}

{% set colors = [
  "silver",
  "black",
  "gold"
] %}

{% set orientations = [
  "portrait",
  "landscape"
] %}

{% set prefix = "c-bolt-" %}
{% set deviceName = device | default("ipad") %}
{% set color = color | default("black") %}
{% set orientation = orientation | default("portrait") %}
{% set magnify = magnify | default(false) %}

{% set attributes = create_attribute(attributes|default({})) %}

{# Defaults for a vanilla `Button` component #}
{% set componentName = deviceName ~ "-viewer" %}
{% set baseClass = prefix ~ componentName %}

{% if image %}
  {% set image = image | merge({
    sizes: "(min-width: 600px) 150vw, 100vw",
    zoom: true
  }) %}
{% endif %}

{% set classes = [
  baseClass,
  "marvel-device",
  color in colors ? baseClass ~ "--" ~ color : "",
  orientation in orientations ? baseClass ~ "--" ~ orientation : ""
] %}


<bolt-device-viewer>
  <div {{ attributes.addClass(classes | raw) }}>
    <div class="{{ baseClass ~ "__inner" }}">
      <div class="{{ baseClass ~ "__top-bar"}}"></div>
      <div class="{{ baseClass ~ "__sleep"}}"></div>
      <div class="{{ baseClass ~ "__volume"}}"></div>
      <div class="{{ baseClass ~ "__camera"}}"></div>
      <div class="{{ baseClass ~ "__speaker"}}"></div>

      <bolt-device-screen class="{{ baseClass ~ "__screen"}} c-bolt-device-viewer__screen {% if magnify %} c-bolt-device-viewer__screen--magnify js-device-viewer-screen {% endif %}">
        {% if magnify %}
          {% include "@bolt/_screen-tilt.twig" %}
        {% endif %}

        {% block device_viewer_image %}
          {% if image %}
            {% include "@bolt/image.twig" with image only %}
          {% endif %}
        {% endblock %}

        {% if magnify %}
          <div class="c-bolt-device-viewer__overlay">
            <bolt-icon name="search" size="xlarge" background="circle" class="c-bolt-device-viewer__overlay-icon" />
          </div>
        {% endif %}
      </bolt-device-screen>

      <div class="{{ baseClass ~ "__home"}}"></div>
      <div class="{{ baseClass ~ "__bottom-bar"}}"></div>

    </div>
  </div>
</bolt-device-viewer>
{'fraction_non_alphanumeric': 0.20610136920490033, 'fraction_numerical': 0.004323804948354552, 'mean_word_length': 3.0193050193050195, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, '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': '5013204', 'n_tokens_mistral': 1463, 'n_tokens_neox': 1318, 'n_words': 296}