{% extends "base.html" %}
{% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %}
{% from "components/sub-navigation.html" import sub_navigation %}
{% from "components/service-link.html" import service_link %}

{% block per_page_title %}
  How to
{% endblock %}

{% block content_column_content %}
<h1 class="font-body-2xl margin-bottom-3">How to</h1>

<p>Notify allows you to easily create templates for messages for your recipients. You can customize messages to encourage
your recipient to manage their benefits and increase follow-through.</p>
<p>Below we explain how to:</p>

<ul class="list list-bullet">
  <li><a class="usa-link" href="#personalize-content">Personalize your content</a></li>
  <li><a class="usa-link" href="#conditional-content">Add conditional content</a></li>
</ul>

{# Format content #}
<h2 class="padding-top-1" id="format-content">Format your content</h2>


<h3>To create and format your message</h3>
<ol class="list">
  <li>All messages start from a template</li>
  <li>Click "<a href={{ url_for('.choose_template', service_id=current_service.id) }}>Send Messages</a>". You'll see existing templates.</li>
  <li>Add a new template or choose an existing template and select Edit.</li>
</ol>

{# Add links #}
<p>When composing a text message, links to websites or online applications can help your recipient respond quickly.</p>

<ul class="list list-bullet">
  <li>Write URLs in full and Notify will convert them into links for you. Note that you cannot hyperlink text in Notify
  messages.</li>
  <li>For link click tracking, you can consider adding campaign parameters to URLs.</li>
  <li>All links should point to a government domain.</li>
  <li>Link directly to where your recipient needs to take action, not to more information.</li>
</ul>

<h3>About link-shortening services</h3>
<p>We do not recommend using a third-party link-shortening service because:</p>
<ul class="list list-bullet">
  <li>Your recipient cannot see where the link will take them, which could make them suspect the link is spam/scam.</li>
  <li>Your link might stop working if there’s a service outage.</li>
  <li>You can no longer control where the redirect goes.</li>
</ul>

{# Personalize content #}
<h2 class="padding-top-1" id="personalize-content">Personalize your content</h2>
<p>Personalizing your content can increase response rates and help the recipient know the text is legitimate.</p>
<ul class="list list-bullet">
  <li>Including a person's first name increases response rates.</li>
  <li>Specific details such as time and location of an appointment or where suspected fraud use occurred encourages action.</li>
</ul>

<h3>To personalize your content</h3>
<ol class="list">
  <li>Add a placeholder to your content by placing two parenthesis around the personalized elements.</li>
  <li>You can manually enter the personalized content or you can upload a spreadsheet with the details and let Notify do the
  work for you.</li>
</ol>

<h4>Example</h4>
<p>To personalize with the recipient's first name and include a reference number:</p>
<p class="padding-2 bg-base-lightest">State WIC: Hello ((first name)), your reference is ((ref number)). Please provide this number when you call 555-123-1234 to make an appointment.</p>

<p>Note that variations in the length of personalized content can impact the length of specific messages, and may affect
the number of parts used.</p>

{# Add conditional content #}
<h2 class="padding-top-1" id="conditional-content">Add conditional content</h2>
<p>Conditional (or optional) content appears only when a recipient meets certain criteria. This feature allows you to make
all or part of the message contingent upon specific criteria associated with the recipient.</p>

<h3>To add conditional content</h3>
<ol class="list">
  <li>Use two parenthesis and ?? to define the conditional content.</li>
  <li>You can manually enter the conditional content or you can upload a spreadsheet with the personal details and let Notify
  do the work for you.</li>
</ol>

<h4>Examples</h4>
<ol class="list">
  <li>If you only want to show something to people who are under 18:
    </br>
    <p class="padding-2 bg-base-lightest">State SNAP: Renewal applications are due by March 15. ((under18??Please get your application signed by a parent or
    guardian.))</p>
  </li>
  <li>
    If you want to make people who are homebound aware of the option of virtual visits (but not other message recipients):
    </br>
    <p class="padding-2 bg-base-lightest">State Medicaid: Please call 555-123-1234 to schedule an appointment. ((homebound??Virtual visits are available.))</p>
  </li>
  <li>
    If you want to send a messages in different languages to different recipients:
    </br>
    <p class="padding-2 bg-base-lightest">((English??We’ve identified unauthorized use on your EBT account. Call the phone number on the back of your card to
    cancel or go to your local CSO for immediate replacement.))((Spanish??Hemos identificado un uso no autorizado en su
    cuenta EBT. Llame al número de teléfono que aparece en el reverso de su tarjeta para cancelarla o diríjase a su CSO
    local para que se la sustituyan inmediatamente.))</p>
  </li>
</ol>

...

{% endblock %}