{{
    response.title=base_title + ': ' + T('sponsor online')
    response.files.append(URL('static', 'js/qrcode.min.js')) # For this page QR code only
    response.files.append(URL('static','css/content_pages.css'))
}}
{{if is_testing: response.meta.viewfile, response.meta.date_accessed = response.view, request.now}}{{pass}}
{{extend ('popup.html' if 'popup' in request.vars else 'uikit_layout.html')}}
{{import img}}

{{block masthead}}
{{if 'popup' not in request.vars:}}
<div class="home-heading uk-text-center uk-padding-small">
  <h1>{{=T('Leaf sponsorship')}}</h1>
</div>
{{pass}}
{{end block}}
<h2>{{=XML(T('Sponsor %s and support OneZoom') % (the_long_name or T("a leaf"),))}}</h2>
<p>{{=XML(T('You can explore this tree of life at home or on your mobile device from %s') % (A("www.onezoom.org", _href="//www.onezoom.org", target="_blank"),))}}</p>
<div class="uk-grid uk-text-small uk-child-width-1-3@m">
  <div>
    <h3>{{=T('About leaf sponsorship')}}</h3>
    <p>{{=T('You can sponsor leaves on the OneZoom tree of life for yourself or as a unique gift for someone you know. As a thank-you, we acknowledge donations to the OneZoom charity (non-profit) by displaying your chosen sponsor’s name on the leaf of your choice. Your donations will help us in our aim to provide easy access to scientific knowledge about biodiversity and evolution, and raise awareness about the variety of life on earth together with the need to conserve it.')}}</p>
    <p><em>{{=T('There can only be one sponsor per leaf so get your favourite species before someone else does.')}}</em></p>
  </div>
  <div>
    <h3>{{=T('Example')}}</h3>
    <script>
    var fonttype = 'Helvetica'; // 'sans-serif' is good too
    var mintextsize = 3; // the smallest size text you want to have displayed
    
    var widthRes = 500;
    var heightRes = 500;
    var leaftext = [null, null];
    var hasSponsor = false;
    var sponsorText = OZstrings['Sponsored for a person of your choice'].toUpperCase();
    var extraText = "";
    var leafCol = OZui.leaf_draw.natural_theme.leaf;
    // this is a bit of a hack but it no longer works to grab the style from the main natural_theme because some of the colours are functions that need to be run on the midnode object of the tree so I'm overiding it here with fixed colours.
    //can override leafCol after this, e.g.
    leafCol.inside.fill  = 'rgb(135,215,90)'; // or could be a function of a node obj
    leafCol.outline.fill = 'rgb(70,135,30)';
    leafCol.bg.fill      = 'rgba(255,255,255, 0)';
    // relating to the leaf itself (highlighted)
    leafCol.inside_hover.fill   = 'rgb(135,215,90)';
    leafCol.outline_hover.fill = 'rgb(70,135,30)';
    // relating to the sponsorship text part
    leafCol.sponsor.fill       = 'rgba(255,255,255,0.4)'; // used if not highlighted
    leafCol.sponsor_hover.fill = 'rgb(255,255,255)';
    // relating to main text part
    leafCol.text.fill = 'rgb(0,0,0)';
    leafCol.text_hover.fill ='rgb(0,0,0)';
    // copyright symbol colors
    leafCol.copyright_hover.fill   = 'rgb(0,0,0)';
    leafCol.copyright.text.fill       = 'rgb(135,215,90)'; //copyrightText
    leafCol.copyright.text_hover.fill = 'rgb(255,255,255)'; //copyrightTextHighlight
    
    leafCol.sponsor.fill = leafCol.sponsor_hover.fill; // Highlight the text more
    leafCol.bg.fill = 'rgba(255,255,255, 0)'; // Don't show the white outline
    
    var node = {"redlist": "{{=iucn_code}}"}

    function drawPreview(context, image) {
        OZui.leaf_draw.fullLeafBase(
            context, widthRes/2.28, heightRes/2, widthRes/2.3, 5.6, 2, leafCol, node)
        OZui.leaf_draw.fullLeaf(
            context, widthRes/2.28, heightRes/2, widthRes/2.3, 5.6, 2, hasSponsor, null,
            sponsorText, extraText, {{=XML(js_common_name or '')}}, {{=XML(js_species_name)}},
            leaftext[0], leaftext[1], null, fonttype, mintextsize, image, null, leafCol, node)
    }

    $( document ).ready(function() {
        var newcanvas = document.getElementById("leafCanvas");
        var leafContext = newcanvas.getContext('2d');
        newcanvas.width = widthRes;
        newcanvas.height = heightRes;
        leafContext.textBaseline = 'middle';

    {{if default_image:}}
        var leafImageFile = new Image();
        leafImageFile.src = "{{=img.thumb_url(default_image.src, default_image.src_id)}}"
        leafImageFile.onload = function() {
            $('#licenceText').show();
            drawPreview(leafContext, leafImageFile);
        }
    {{else:}}
        drawPreview(leafContext);
    {{pass}}
    });
    </script>
    <canvas class="example-leaf" id="leafCanvas"></canvas>
    <p id="licenceText">{{=XML(
        A(
            T('More information about this image'),
            _href=URL(
                'tree', 'pic_info',
                args=[getattr(default_image, 'src', ''), getattr(default_image, 'src_id', '')])))
        }}</a></p>
  </div>
  <div>
{{
url1_minus_scheme = "www.onezoom.org/sponsor"
url2_minus_scheme = "www.onezoom.org/sponsor_leaf?ott={}".format(ott)
#NB the links here should be hardcoded (not using the URL() helper)
# so that they do not get the popup information included
# but they should use the A() helper so that they are turned off on MDs
}}
    <h3>{{=T('How to sponsor')}}</h3>
    <p>{{=T('This leaf has to be sponsored from your own device.')}}</p>
    <p>{{=XML(
    T('To sponsor %s later, make a note of your creature code and enter it at %s') % (
        the_long_name or T('a leaf'),
        A(url1_minus_scheme, _href='//' + url1_minus_scheme, target='_blank')))}}</p>
    <h4>{{=T('Your creature code is')}} <strong class="highlight">{{=ott}}</strong></h4>
    <h3>{{=T('Direct URL for sponsorship')}}</h3>
    <p>{{=XML(T('%(slot0)s or point the camera app of your phone at the following QR code:') % {'slot0': ((xmlescape(XML(
    T('Alternatively, to sponsor %s directly, you can simply go to %s') % (
        the_long_name or T('this leaf'),
        A(url2_minus_scheme, _href='//'+url2_minus_scheme, _target='_blank'))))))})}}</p><div class="qrcode"><span id="OZ-qrcode"></span></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("OZ-qrcode"), {
	text: "{{=XML('https://' + url2_minus_scheme)}}",
	width: 128,
	height: 128,
	correctLevel : QRCode.CorrectLevel.H
});
</script>
  </div>
</div>
<p class="page-end">{{=T('Thank you for your interest in supporting our work.')}}</p>