{% extends 'pirati_cz.html' %}

{%block body%}
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
.vizitkaShow { border: 1px dotted black; }
.vizitkaShow .pv { font-family: Roboto Condensed, Arial, sans-serif; font-size: 10pt; font-weight: normal; margin: 1em; background: white; color: black; }
.vizitkaShow .pv>.bl{ margin-bottom:0.5em; line-height: 1.1em;}
.vizitkaShow .name { font-size: 13pt; font-weight: bold; }
.vizitkaShow .social { box-sizing: content-box; font-weight: bold; color: white !important; background: black; margin: 0.1em; padding: 0.2em; width: 1em; height: 1em; display: inline-block; text-align: center; text-decoration:none; border-radius: 0.5em; }
.vizitkaShow .logo { margin-top: 1.5em; }
.vizitkaShow .logo img { height: 3.5em; margin-left:-0.1em; }
</style>

<div class="row">
  <div class="medium-12 large-12 columns">
    <section class="o-section">
      <div class="o-section-inner">
        <div class="o-section-block" data-equalizer data-equalize-on="medium">
          <h2>Vygenerování HTML vizitky pro email</h2>
          Vyplněním následujícího formuláře získáte HTML kód, který můžete vložit
          jako podpis do vašich emailových zpráv.
        </div>
      </div>
    </section>
  </div>
</div>
<div class="row">
  <div class="medium-6 large-6 columns">
    <section class="o-section">
      <div class="o-section-inner">
        <form action="#" method="POST">
        {%csrf_token%}
        {{form}}
        <input type="submit" value="Odeslat" class="button"/>
        </form>
      </div>
    </section>
  </div>
  <div class="medium-6 large-6 columns">
    <section class="o-section">
      <div class="o-section-inner">
        Náhled:
        <div class="vizitkaShow">
            <div class="pv">
            <div class="bl">
            <b class="name">{{form.name.value|default_if_none:'[Jméno a příjmení]'}}</b>
            {%if form.nazev_funkce.value %}<br/>{{form.nazev_funkce.value}}{%endif%}
            </div>

            <div class="bl">
            {%if form.email.value%}{{form.email.value}}<br/>{%endif%}
            {%if form.phone.value %}{{form.phone.value}}<br/>{%endif%}
            {%if form.soc_fb.value %}<a href="{{form.soc_fb.value}}" class="social">f</a>{%endif%}
            {%if form.soc_in.value %}<a href="{{form.soc_in.value}}" class="social">in</a>{%endif%}
            </div>

            <div class="logo"><img src="data:image/png;base64,[encoded data, 5516 characters]"/></div>
            </div>
        </div>
        <br/>
        HTML kód ke zkopírování:
        <div>
            <textarea rows="10">
<style>@import url(https://fonts.googleapis.com/css?family=Roboto);
body {font-family: Roboto, Arial; background: white; color:black; }
.pv { font-family: Roboto Condensed, Arial, sans-serif; font-size: 10pt; font-weight: normal; margin: 1em; background: white; color: black; }
.pv>.bl{ margin-bottom:0.5em; line-height: 1.1em;}
.name { font-size: 13pt; font-weight: bold; }
.social { box-sizing: content-box; font-weight: bold; color: white !important; background: black; margin: 0.1em; padding: 0.2em; width: 1em; height: 1em; display: inline-block; text-align: center; text-decoration:none; border-radius: 0.5em; }
.logo { margin-top: 1.5em; }
.logo img { height: 3.5em; margin-left:-0.1em; }
</style>
<div class="pv"><div class="bl"><b class="name">{{form.name.value|default_if_none:'[Jméno a příjmení]'}}</b>{%if form.nazev_funkce.value %}<br/>{{form.nazev_funkce.value}}{%endif%}</div>
<div class="bl">{%if form.email.value %}{{form.email.value}}<br/>{%endif%}{%if form.phone.value %}{{form.phone.value}}<br/>{%endif%}{%if form.soc_fb.value %}<a href="{{form.soc_fb.value}}" class="social">f</a>{%endif%}{%if form.soc_in.value %}<a href="{{form.soc_in.value}}" class="social">in</a>{%endif%}</div>
<div class="logo"><img src="data:image/png;base64,[encoded data, 5516 characters]"/></div>
</div>
            </textarea>
        </div>
      </div>
    </section>
  </div>
</div>


{%endblock%}
