{{
    response.title=base_title + ': ' +  T('non-sponsorable species')
    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('Sorry, this leaf is not available to sponsor right now'))}}</h2>
<em>{{=XML(T('This leaf is current unavailable for direct sponsorship, either because someone else has sponsored it and it is still being processed, or because it is one of a handful of special species which are only available via direct communication with us. You can double-check by visiting the leaf on our main site at %(slot0)s') % {'slot0': (xmlescape(A("www.onezoom.org/life/@={}".format(ott), _href="//www.onezoom.org/life/@={}".format(ott), target="_blank")))})}}</em>
<div class="uk-grid uk-text-small uk-child-width-1-3@m" uk-grid>
  <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>
  </div>
  <div>
    <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 = "{{=T('Not currently available to sponsor')}}".toUpperCase();
    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, "", {{=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>
    <h3>{{=T('There are plenty more leaves')}}</h3>
    <p> {{=T('We’re sorry if you wanted to sponsor this leaf.  There is only one name per species so get your favourite species while you can.')}}</p>
    <p>{{=XML(T('Find another leaf to sponsor on OneZoom at %s') % (A("www.onezoom.org/sponsor", _href="//www.onezoom.org/sponsor", target="_blank"),))}}</a></p>
    <p> {{=T('Thank you for your interest in supporting our work.')}}</p>
  </div>
</div>